jQuery/JS判断/设置checkbox的选中状态

项目中经常遇到 checked 选中的问题，可以通过 JS 或者 jQuery 实现。

1、JS 方法判断选中：

代码语言：javascript复制var check = document.getElementsByTagName('input')[0];

console.log(check.checked);//false因为HTML代码中没有设置 checked 属性值，所以默认返回 false ，反之则返回 true 。

若要在HTML中设置 checkbox 为选中状态则可以这样设置：

代码语言：javascript复制设置/取消选中：

代码语言：javascript复制// 设置元素为选中状态

check.checked = true;

// 设置元素为未选中状态

check.checked = false;2、jQuery 方法判断选中：

(1)、JQ1.6版本之前（不包括1.6版本）判断 checkbox 是否被选中用的是 attr() 方法，HTML代码与上面相同，只放 jQuery 代码：

代码语言：javascript复制console.log($("input[type='checkbox']").attr('checked'));//false不要想着在JQ1.6版本之前使用 prop() 方法，只会报出 $().prop()is not a function 的错误

(2)、JQ1.6版本之后Jquery中新引入了 prop() 方法，此时再用 attr() 方法判断 checkbox 的状态则会返回 undefined ，若有设置 checked 属性为 true ，则会返回 checked 而不是 true 。

1.6+版本 prop() 方法：

代码语言：javascript复制console.log($("input[type='checkbox']").prop('checked'));//false(3)、除了以上两种方法JQ中还有一个 is() 方法同样可以判断 checkbox 的状态

is() 方法代码如下：

代码语言：javascript复制console.log($("input[type='checkbox']").is(':checked'));//false要特别注意不要漏巧":disabled"中的"":"

设置选中：

代码语言：javascript复制$("input[name='checkbox']").attr("checked",true);取消选中：

代码语言：javascript复制$("input[name='checkbox']").attr("checked",false);注意：true 和 false 是布尔值，不需要加引号。

(adsbygoogle = window.adsbygoogle || []).push({});