关于checkbox全选与全不选的实现与遇到的问题

HTML:

 1 <div class="outbox">
 2 　　<label for="box">全选</label>
 3 　　<input type="checkbox" id="box"/>
 4 </div>
 5 <div class="outbox2">
 6 　　<label for="box1">选项1</label>
 7 　　<input type="checkbox" id="box1" name="goods"/>
 8 　　<label for="box2">选项2</label>
 9 　　<input type="checkbox" id="box2" name="goods"/>
10 </div>

第一种方法：

 1 $("#box).click(function(){
 2 
 3 　　if($(this).is(":checked)){
 4 
 5 　　　 $("input[name='goods']").attr("checked","checked");
 6 
 7 　　}else{
 8 　　　　　　        
 9       $("input[name='goods']").removeAttr("checked","checked");
10 　　
11 　　}
12 
13 })

　　本以为这种方法能完成全选与全不选的功能，但是当第一次点击时，能正确全选，再点击也能正确全不选；但是当再次点击的时候，就不能全选与全不选了，点了完全没作用。找不到原因是什么！

第二种方法：

 1 $("#box).click(function(){
 2 
 3 　　　　if(this.checked){
 4 
 5 　　　　　　$("input[name='goods']").each(function(){
 6 
 7 　　　　　　　　this.checked=true;
 8 
 9 　　　　　　})
10 
11 　　　　}else{
12 
13 　　　　　　$("input[name='goods']").each(function(){
14 
15 　　　　　　　　this.checked=false;
16 
17 　　　　　　})
18 
19 　　　　}
20 
21 　　})

　　这种方法就能正确的实现全选与全不选的功能了。这又是为什么呢？

第三种方法：

　1)

1 $("#box).change(function(){
2 
3 　　$("input[name='goods']").prop("checked",this.checked);
4 
5 })

 

　2)

 1 $("#box).click(function(){
 2 
 3 　　　　if($(this).is(":checked")){
 4 
 5 　　　　　　$("input[name='goods']").prop("checked",true);
 6 
 7 　　　　}else{
 8 
 9 　　　　　　$("input[name='goods']").prop("checked",false);
10 
11 　　　　}
12 
13 　　})

　　或者是把prop里的布尔值，true改成“checked”,false改成 “ ”。也可已实现全选与全不选的功能。

疑问：为什么prop就可以直接赋值，而attr这样赋值就不行呢？

　　我一开始的时候，checkbox是未选中状态，alert（$("#box").attr("checked")）一直返回的是defined，但是alert（$("#box").prop("checked")）返回的就是false；这是为什么捏？

　　有位网友也遇到过类似的问题，链接：http://www.jb51.net/article/51136.htm

　　原因是在jquery1.6版本，对checked属性在页面初始化的时候已经初始化好了，不会随着状态的改变而改变。也就是说如果checkbox在页面加载完毕是选中的，那么返回的永远都是选中状态，但是如果一开始就没有被选中，返回的永远是undefined。

 

　　prop()函数用于设置或返回当前jq对象所匹配的元素的属性值，该函数属于jq对象。如果要删除DOM元素的属性，就用removeProp()函数

　　prop()与attr()的区别：链接：http://www.365mini.com/page/jquery-attr-vs-prop.htm

posted @ 2016-10-25 11:31  站住，别跑  阅读(2372)  评论(0)  编辑  收藏  举报