摘要:本文讲解了jQuery如何获取和设置checkbox的checked属性,希望阅读本篇文章以后大家有所收获,加深大家对jQuery的理解。
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
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号