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