先上html結構 如圖，這是前端進階經典書籍【鋒利的jquery】中的一個案例，使用attr方法給元素添加屬性以達到選中與取消效果。 要求：1. 點擊全選/全部選，改變下麵四個覆選框選中狀態； 2. 單獨點擊下方按鈕，只要存在未選中的，則上方全選/全不選為未選中狀態，全部選中，則上方全選/全不選也自 ...
先上html結構
<body> <form action=""> <input type="checkbox" id="checkedAll">全選/全不選<br> <input type="checkbox" name="items" value="足球">足球 <input type="checkbox" name="items" value="藍球">藍球 <input type="checkbox" name="items" value="羽毛球">羽毛球 <input type="checkbox" name="items" value="乒乓球">乒乓球<br> <input type="button" id="send" value="提交"> </form> </body>
如圖，這是前端進階經典書籍【鋒利的jquery】中的一個案例，使用attr方法給元素添加屬性以達到選中與取消效果。
要求：1. 點擊全選/全部選，改變下麵四個覆選框選中狀態；
2. 單獨點擊下方按鈕，只要存在未選中的，則上方全選/全不選為未選中狀態，全部選中，則上方全選/全不選也自動變為選中狀態。
<script> $("#checkedAll").on("click",function(){
// 判斷點擊後this.checked的結果，預設未選中即為false，第一次點擊則為true,第二次為false,再賦值給下麵的input（此處邏輯與書上稍有不同）
// 註意事項： 使用attr給表單元素設置選中狀態時，第二個參數一定要是布爾值true/false,不能習慣性寫成帶引號，那就是字元串了。
if(this.checked){ $("input[name=items]").attr("checked",true); }else{ $("input[name=items]").attr("checked",false); } }) </script>
運行起來似乎沒問題，但當多次點擊之後會發現，屬性可以添加上去，但選中狀態並沒有改變。
what's wrong?
這就要歸宿到jQuery的版本問題了，在1.6之後，對於元素固有的屬性，應該使用 prop() 方法。
<script> $("#checkedAll").on("click",function(){ console.log(!this.checked); if(this.checked){ $("input[name=items]").prop("checked",true); }else{ $("input[name=items]").prop("checked",false); } }) </script>
以上代碼還可以精簡為
<script> $("#checkedAll").on("click",function(){ $("input").prop("checked",this.checked); }) </script>
