用JQuery實現全選、全不選、反選
阿新 • • 發佈：2018-12-30
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#allOrNone').click(function () { //點選“選擇狀態”，實現全選與全不選 $(':checkbox').attr('checked', $(this).attr('checked')); }); //當改變了上面選擇項的選中狀態後，“選擇狀態”的狀態也跟著改變 $(':checkbox[id!=allOrNone]').click(function () { optionStateChanged(); }); //選項改變抽象的方法 function optionStateChanged() { var state = true; $(':checkbox[id!=allOrNone]').each(function () { if (!$(this).attr('checked')) { state = false; return false; //break; 不可以使用break； } }); //如果有一個沒有被選中，則將“選擇狀態”的狀態也設定為沒有選中狀態 $('#allOrNone').attr('checked', state); } //反選 $('#chooseReverse').click(function () { //進行選項的反選工作 $(':checkbox[id!=allOrNone]').each(function () { $(this).attr('checked', !$(this).attr('checked')); }); //單獨考慮選項改變的操作 optionStateChanged(); }); }); </script> </head> <body> <input type="checkbox" value="1" />足球 <input type="checkbox" value="2" />足球 <input type="checkbox" value="3" />足球 <input type="checkbox" value="4" />足球 <input type="checkbox" value="5" />足球<br /> <input type="checkbox" name="name" value="" id="allOrNone" />選擇狀態 <input type="button" name="name" value="反選" id="chooseReverse" /> </body> </html>