jQuery获取和设置checkbox的checked属性小结

scola666 发布于2019-08-01 16:42 / 1511人阅读

摘要：最近在项目中使用到设置，使用场景是页面上有三类单选框，一个是全选所有页数据一个是选择当前页，一个是选择一条，也算常用的场景。的属性在页面首次加载时就确定。最后，总结下获取和设置属性的方法。

最近在项目中使用到jQuery设置checkbox，使用场景是页面上有三类单选框，一个是全选所有页数据(id="cb1"),一个是选择当前页(id="cb2")，一个是选择一条(name="cb3")，也算常用的场景。

一开始全选框的点击事件这样写：

$("#cb1",this).click(function(){
    var allChecked = this.checked;
    $("#cb2").attr("checked",allChecked);    //当前页
    $("input[name="cb3"]").each(    
    function(){
        this.checked = allChecked;
    })
});

结果是点击cb1以后,cb3的每条和cb2都能选中，cb1取消后其他也都能取消，但经过上面一个回合以后，cb3正常，cb2却再也选不中，没有反应，当时为此抓狂了很久。一开始以为是jQuery的版本问题，所以查看了引入的版本，发现并不是原因。

原来在jquery里，有两种操作元素属性的方法，一种是attr()，另一种是prop()。

attr()的属性在页面首次加载时就确定。当页面初始状态checkbox没有选中，$("#cb1").attr("checked")为undefined，点击选中后，还是undefined，不管选中与否$("#cb1").attr("checked")始终都是undefined；当页面初试状态checkbox选中，$("#cb1").attr("checked")为checked，之后取消选中还是checked。

prop()方法随checked属性改变而改变，选中时为true，为选中时为false。

最后，总结下获取和设置checked属性的方法。

得到选中属性

$("#id").prop("checked")

$("#id").get(0).checked)

document.getElementById("#id").checked

$("#id").is(":checked")

设置选中

$("#id").prop("checked",true)

$("#id").get(0).checked = true

document.getElementById("#id").checked = true

不足之处欢迎大家补充指正。

参考：
http://blog.csdn.net/hjb27224...
http://www.jb51.net/article/5...

GPU云服务器云服务器 jquery获取checkbox组 jquery设置disabled属性 jquery遍历checkbox jQuery操作checkbox

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50692.html

jQuery实现全选、反选和不选功能

摘要：当勾选全选按钮旁边的复选框时，列表中的选项全部选中，反之取消勾选则列表中的选项全部为未选中状态。全选或全不选全选全不选反选设置全选复选框获取选中选项的值选项总个数全选不全选HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.时间都去哪儿了 ...

番茄西红柿 2019-04-23 11:43 评论0 收藏0
DOM元素的属性（property）和特性（attribute）

摘要：属性和特性我们知道的实现就是把一个文档映射为一棵树，而树上的每个节点其实就是一个对象。从jQuery的prop()和attr()方法说开去 jQuery中有两个获取DOM元素属性的方法：prop()和attr()，看似可以互相替换，但若搞不清这两个方法获取的到底是什么属性，有时就会出现令人困惑的结果。官方文档中，用了下面的例子来解释这两者的不同：操作结果 elem.c...

psychola 2019-08-21 14:26 评论0 收藏0
DOM元素的属性（property）和特性（attribute）

摘要：属性和特性我们知道的实现就是把一个文档映射为一棵树，而树上的每个节点其实就是一个对象。从jQuery的prop()和attr()方法说开去 jQuery中有两个获取DOM元素属性的方法：prop()和attr()，看似可以互相替换，但若搞不清这两个方法获取的到底是什么属性，有时就会出现令人困惑的结果。官方文档中，用了下面的例子来解释这两者的不同：操作结果 elem.c...

tianyu 2019-08-01 15:42 评论0 收藏0
发现一个jQuery v1.11.1下操作checkbox状态的bug

摘要：在调试使用操作的选中状态切换的时候，发现了个复选框在被选中再取消选中一次后，无法再次通过重新选中了。如果发现不对，欢迎指正。但是使用直接操作每一个的属性来设置，是可以正常的。在调试使用jQuery操作checkbox的选中状态切换的时候，发现了个bug：checkbox复选框在被选中再取消选中一次后，无法再次通过jQuery重新选中了。如果发现不对，欢迎指正。如果知道怎么解决这个问...

AlphaWatch 2019-08-19 17:19 评论0 收藏0
jQuery的其他常用知识点

摘要：获取匹配的第一个元素相对于其最近的具有定位即不是的父元素的位置返回不能设置。但是这两种方法的缺点是要绑定的元素必须存在文档中。支持对动态创建的元素有效。解绑所有代理的事件，而元素本身的事件不会被解绑。触发事件响应方法，不触发浏览器行为。选择器 :visible 和 :hidden 匹配显示和隐藏的元素（css-display），需要指明元素或类，因为head、script等元素也是...

tomorrowwu 2019-08-29 17:02 评论0 收藏0