正文

jquery radio 取值

小编
小编 V管理员 /0 评论 /70 阅读
0109
欧意国内注册

jQuery设置Radio选中的方法

在网页开发中，我们经常需要使用到单选按钮（Radio Button），单选按钮允许用户从一组选项中选择一个，在HTML中，我们可以使用<input type="radio">标签来创建单选按钮，有时候我们需要通过JavaScript或者jQuery来实现动态地设置某个单选按钮为选中状态，本文将介绍如何使用jQuery来实现这一功能。

我们需要在HTML中创建一组单选按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery设置Radio选中示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <input type="radio" name="gender" value="male"> 男
        <input type="radio" name="gender" value="female"> 女
        <button id="setMale">设置为男性</button>
        <button id="setFemale">设置为女性</button>
    </form>
    <script src="main.js"></script>
</body>
</html>

接下来，我们在main.js文件中编写jQuery代码来实现设置单选按钮为选中状态的功能：

$(document).ready(function() {
    // 设置男性单选按钮为选中状态
    $('#setMale').click(function() {
        $('input[name="gender"]').prop('checked', false); // 先取消所有单选按钮的选中状态
        $('input[value="male"]').prop('checked', true); // 然后设置男性单选按钮为选中状态
    });
    // 设置女性单选按钮为选中状态
    $('#setFemale').click(function() {
        $('input[name="gender"]').prop('checked', false); // 先取消所有单选按钮的选中状态
        $('input[value="female"]').prop('checked', true); // 然后设置女性单选按钮为选中状态
    });
});

在上面的代码中，我们首先引入了jQuery库，并在$(document).ready()函数中编写了设置单选按钮为选中状态的逻辑，当用户点击“设置为男性”或“设置为女性”按钮时，会触发相应的事件处理函数，在这些事件处理函数中，我们首先使用$('input[name="gender"]').prop('checked', false)来取消所有单选按钮的选中状态，然后使用$('input[value="male"]').prop('checked', true)或$('input[value="female"]').prop('checked', true)来设置对应的单选按钮为选中状态。