jq、js中判断checkbox是否选中

最近在开发项目时用到checkbox复选框，其中遇到一个问题：在JQ中如何判断checkbox是否被选中呢？之前用JQ获取元素的属性用的都是attr(),但用在checkbox上却没有用，原因何在???

1、JS中判断checkbox是否被选中

对于在js中来判断checkbox是否被选中很简单，举个🌰来说

HTML代码：

<input type="checkbox" name="box">

相应的javascript代码如下：

var check = document.getElementsByTagName('input')[0];
console.log(check.checked);//false        

因为HTML代码中没有设置checked属性值，所以默认返回false,反之则返回true;若要在HTML中设置checkbox为选中状态则可以这样设置：

<input type="checkbox" name="box" checked="true">

2、JQ中判断checkbox是否被选中

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

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()方法：

console.log($("input[type='checkbox']").prop('checked'));//false

(3)、除了以上两种方法JQ中还有一个is()方法同样可以判断checkbox的状态

is()方法代码如下：

console.log($("input[type='checkbox']").is(':checked'));//false

要特别注意不要漏巧":disabled"中的":"

3、attr()与prop()如何选择

attr()方法用于设置或返回被选元素的属性值；

prop()方法用于获取匹配元素集合中的第一个元素的属性值；

对于attr()方法的解释还比较通俗易懂，prop()方法看了解释还是一脸懵逼，什么鬼……

查找Jquery的官方文档有一段是对Attributes和Properties的对比，翻译过来是这么解释的：

 

在jQuery 1.6之前，.attr（）方法在检索某些属性时有时会考虑属性值，这可能会导致不一致的行为。 从jQuery 1.6开始，.prop() 方法提供了明确的检索属性值的方法，而.attr() 方法仅提供检索属性。

举例来说，应使用.prop（）方法检索并设置selectedIndex，tagName，nodeName，nodeType，ownerDocument，defaultChecked和defaultSelected。 在jQuery 1.6之前，这些属性可以用.attr（）方法检索，但这不在attr的范围内。

不是很清楚的可以记住举得这几个用红色标出来的这几个属性。

PS：attributes和properties都被翻译为“属性”

想要了解更多关于attributes和properties的区别值得深入挖掘一番，今天暂且就到这儿，歇了。

补充：网上找到一篇解释attributes与properties的区别的文章，通俗易懂分享给大家，点击这里跳转。