jQuery操作radio的方法

以下面的html为例：

<input type="radio" name="radio" value="1" />1
<input type="radio" name="radio" id="radio2" value="2" />2
<input type="radio" name="radio" value="3" />3
<input type="radio" name="radio" value="4" />4

选中radio

// 选中第一个
$("input[name=radio]:eq(0)").attr("checked",'checked');
// 设置id=radio2的一项为选中
$("#radio2").attr("checked","checked");
// 设置id=radio2的一项为不选中
$("#radio2").removeAttr("checked");
// 设置value = 2的一项为选中
$("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");
// 设置index = 1，即第二项为当前选中
$("input[type='radio'][name='radio']").get(1).checked = true;
// id为radio2的一项处于选中状态则isChecked = "checked", 否则isChecked = undefined;
var isChecked = $("#radio2").attr("checked");

选中radio存在的问题

使用$("#radio2").attr("checked","checked");设置选中后，如果再使用该方法选中别的radio，就会出现没有一个处于选中状态。

attribute 和 property 是不同的。

property 是 html 标签固有的属性，而 attribute 多是 html 自定义属性。
attribute是 html 文档上标签属性，而 property 则是对应 DOM 元素的自身属性。

从操作方法上来看，attribute可以通过 DOM 规范的 getAttribute 和 setAttribute进行获取修改，而 property 可以通过对象访问属性的方式，或者 [" "]来修改获取。

jQuery 获取或设置 attribute 用的是 attr ,获取或设置 property 用的是 prop。

作者：天天向上卡索
链接：http://www.jianshu.com/p/6ac7541b1f45
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

模拟点击

设置选中之后调用对象的click()方法

$("input:radio[name='radio'][value='1']").click();

原生JS

//check
document.getElementsByName("radio")[0].checked = true;
//uncheck
document.getElementsByName("radio")[0].checked = false;

$("input[type='radio'][name='radio']").get(1).checked = true;
$("input[type='radio'][name='radio']").[1].checked = true;

jQuery

$("#radio2").prop("checked",true);

有多少个被选中

//name为radio的radio有多少个被选中
$("input[type='radio'][name='radio']:checked").length;

获取radio被选中项的值

$('input[type="radio"][name="radio"]:checked').val();