首页 > 代码库 > checkbox与jq<转>2
checkbox与jq<转>2
jQuery中attr()解决checked属性问题
这两天在做一个表单提交,其中就包含有checkbox的全选和反选,这是最先开始做出来的版本,代码如下:
<input id="checkAll" type="checkbox" />全选<input name="subBox" type="checkbox" />Php<input name="subBox" type="checkbox" />Java<input name="subBox" type="checkbox" />NodeJS<input name="subBox" type="checkbox" />Python<script>$(document).ready(function(){ $("#checkAll").click(function() { //console.log($(this).attr("checked")); //console.log($(this).is(":checked")) if($(this).attr("checked")){ $(‘input[name="subBox"]‘).attr("checked",true); }else{ $(‘input[name="subBox"]‘).attr("checked",false); } }); });</script>
点击发现一点反应也没有,到网上搜了一下,发现attr()获取到的值就没变过,而is(":checked")会随着点击变化,就把if条件修改成了if($(this).is(":checked")),发现终于可以了,全选可以,取消全选也可以,但又出现了一个新的问题,只能点击一次,点击一次之后就没有全选反选的效果了,太奇怪了,这什么问题!!!
再去搜,发现了一个的东西,prop()这个东东,原来jQuery自从1.6之后就有了它,attr()太混乱,为了区分,就出现了prop(),对于checked,若是prop()获取的则是浏览器对于当前变化着的值,即随着点击变化而变化,而attr()则是浏览器记录checked的初始值,即它的默认值,不会随着改变而改变,然后试了试新的方法,如下:
<script>$(document).ready(function(){ $("#checkAll").click(function() { if($(this).prop("checked")){ $(‘input[name="subBox"]‘).prop("checked",true); }else{ $(‘input[name="subBox"]‘).prop("checked",false); } }); //or var isChecked = $(this).prop("checked"); $("input[name=‘subBox‘]").prop("checked", isChecked); });</script>然后你就可以随意的切换全选反选啦!
checkbox与jq<转>2
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。