JQuery對checkbox的操作
阿新 • • 發佈：2017-11-17
個數 mic style doctype more 全部 nbsp jquery eth
對復選框組的全選、全不選、不全選，獲取選中的復選框的值的操作
- 點擊全選按鈕，復選框組全部選中或者全部取消。
- 實現全選按鈕和復選框組的聯動，當復選框組中有一個沒有被選中後，那麽id=‘checkedAll’的全選按鈕應該要取消選中；當復選框組全部選中後，全選按鈕也應該被選中。
- 獲取已選中的復選框的值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>對復選框組的全選操作</title>6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 /*全選 10 全選cheched和下方的checkbox按鈕的checked是一致的， 11 故可用this.checked。 12 註意：$(this).checked是錯的13 */ 14 $(‘#checkedAll‘).click(function() { 15 $(‘[name=item]:checkbox‘).prop(‘checked‘, this.checked); 16 }); 17 18 /*判斷復選框的總數，是否和選中的復選框的數量相等 19 相等：全選了 20 不相等：沒有全選 21 */ 22 $(‘[name=item]:checkbox‘).click(function() { 23 /*得到的是ul下 name=item 的復選框數組*/ 24 var $checkedArray = $(‘[name=item]:checkbox‘); 25 /*$checkedArray.filter(‘:checked‘) -----> 已經選擇的復選框 */ 26 $(‘#checkedAll‘).prop(‘checked‘,$checkedArray.length==$checkedArray.filter(‘:checked‘).length); 27 28 }); 29 }); 30 </script> 31 <script type="text/javascript"> 32 $(function () { 33 //獲取已選的復選框的值 34 var checkedArray = new Array();//放已經選擇的checkbox的value 35 var count;//已經選擇的個數 36 $(‘#btn_submit‘).click(function() { 37 checkedArray.length=0; 38 count=0; 39 $(‘[name=item]:checkbox:checked‘).each(function() { 40 checkedArray.push($(this).val()); 41 count++; 42 }); 43 if (checkedArray.length==0) { 44 alert("Please check one at least."); 45 return; 46 } 47 confirm("已選復選框的值："+checkedArray+"\n"+"選中的復選框個數："+count); 48 }); 49 }) 50 </script> 51 </head> 52 <body> 53 <form action="#" method="POST"> 54 <input type="checkbox" id="checkedAll"><label for="checkedAll">全選</label> 55 <ul> 56 <li><input type="checkbox" name="item" value="basketball">籃球</li> 57 <li><input type="checkbox" name="item" value="football">足球</li> 58 <li><input type="checkbox" name="item" value="badminton">羽毛球</li> 59 <li><input type="checkbox" name="item" value="pingpong">兵乓球</li> 60 <li><input type="checkbox" name="item" value="swimming">遊泳</li> 61 <li><input type="checkbox" name="item" value="running">跑步</li> 62 </ul> 63 <button type="button" id="btn_submit" value="提交button">提交</button> 64 </form> 65 </body> 66 </html>
對於代碼中的不足，不夠簡潔的還可以再優化的地方，如果有什麽更好的想法和實現方法，歡迎一起交流學習。
Write less, do more.
JQuery對checkbox的操作