码迷,mamicode.com
首页 > 其他好文 > 详细

checkbox与jq<转>2

时间:2016-11-24 07:16:09      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:取消   版本   它的   提交   记录   ext   bsp   java   全选和反选   

jQuery中attr()解决checked属性问题

作者:u012885111

这两天在做一个表单提交,其中就包含有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

标签:取消   版本   它的   提交   记录   ext   bsp   java   全选和反选   

原文地址:http://www.cnblogs.com/zhangzs000/p/6095633.html

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