jQuery精讲：单选按钮(radio)的控制与管理

jQuery是一个快速、小型且功能丰富的JavaScript库，它使得HTML文档遍历和操作、事件处理、动画和Ajax等操作变得简单易用。在Web开发中，表单元素的操作尤为重要，其中单选按钮是收集用户输入的一种基础方式。通过jQuery，我们可以轻松地获取和设置单选按钮的状态，以及对它们的改变进行响应。

一、设置单选按钮的选中状态

要使用jQuery设置单选按钮（radio

button）的选中状态，我们可以使用prop()方法或者attr()方法。以下是如何通过prop()方法来实现的例子：

// 假设单选按钮具有name属性值为"gender"

$("input[name='gender']").val(["male"]);

// 将value="male"的单选按钮设置为选中

替代方案可以使用.attr()：

$("input[name='gender'][value='male']").attr('checked',

true); // 同样的效果

二、获取单选按钮的值

当我们需要获取当前选中的单选按钮的值时，我们可以使用:checked选择器与.val()方法：

var selectedValue =$("input[name='gender']:checked").val();

alert("选中的值是:" + selectedValue);

三、绑定单选按钮的变化事件

要在单选按钮的选中状态发生变化时做出响应，可以使用.change()方法来绑定一个事件处理器：

$("input[name='gender']").change(function(){

alert("选中的值变成了: " + $(this).val());

});

四、判断单选按钮是否被选中

有时我们可能需要判断某个单选按钮是否被选中，这可以通过.is()方法和:checked选择器来实现：

if($("input[name='gender'][value='male']").is(':checked')) {

alert("男性被选中");

} else {

alert("男性未被选中");

}

五、禁用和启用单选按钮

我们可以通过设置disabled属性来禁用或启用单选按钮：

// 禁用单选按钮

$("input[name='gender']").prop("disabled",true);

// 启用单选按钮

$("input[name='gender']").prop("disabled",false);

六、清除选中状态

要清除一组单选按钮的所有选中状态，我们可以使用.prop()方法：

$("input[name='gender']").prop('checked',false);