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

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

时间:2020-03-17 15:29:50      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:tps   两种   class   pre   原来   没有   article   htm   false   

最近在项目中使用到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属性的方法。

得到选中属性

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

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

  3. document.getElementById("#id").checked

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

设置选中

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

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

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

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

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

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

标签:tps   两种   class   pre   原来   没有   article   htm   false   

原文地址:https://www.cnblogs.com/jlfw/p/12510893.html

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