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的区别的文章,通俗易懂分享给大家,点击这里跳转。
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注

2 × 4 =