码迷,mamicode.com
首页 > Web开发 > 详细

jq、js中判断checkbox是否选中

时间:2017-06-01 00:28:42      阅读:445      评论:0      收藏:0      [点我收藏+]

标签:not   color   efault   type   span   区别   集合   java   defaults   

最近在开发项目时用到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()方法检索并设置selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultCheckeddefaultSelected。 在jQuery 1.6之前,这些属性可以用.attr()方法检索,但这不在attr的范围内。

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

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

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

 

jq、js中判断checkbox是否选中

标签:not   color   efault   type   span   区别   集合   java   defaults   

原文地址:http://www.cnblogs.com/daicunya/p/6926289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!