jquery實現全選反選操作
阿新 • • 發佈：2019-02-07
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <title>複選按鈕</title> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(function(){ //獲得所有name=cboxjquery物件 var a=$("input[name='cbox']"); //為全選按鈕繫結點選事件 $("input[name='checkAll']").click(function(){ a.each(function(){ $(this).prop("checked",$("input[name='checkAll']").prop("checked")); }); }); //為反選按鈕繫結點選事件 $("#btn").click(function(){ a.each(function(){ //每一個jquery物件設定為與當前狀態相反的選擇 $(this).prop("checked",!$(this).prop("checked")); }); //反選操作之後更改全選按鈕的狀態 change_checked_all(); }); //為每一個選擇按鈕繫結點選事件 a.each(function(){ $(this).click(change_checked_all); }); //根據當前所有複選按鈕的狀態更改全選按鈕的狀態 function change_checked_all(){ var ch=true; //判斷是否所有選項都被選擇 for(var i=0;i< a.size();i++){ if($(a.get(i)).prop("checked")==false){ ch=false; break; } } //根據所有選擇按鈕的狀態更改全選按鈕的狀態 $("input[name='checkAll']").prop("checked",ch); } }) </script> </head> <body> <div id="div1" style="width: 300px;height: 200px"> <input type="checkbox" name="checkAll"/>全選<br/> <input type="checkbox" name="cbox"/>1<br/> <input type="checkbox" name="cbox"/>2<br/> <input type="checkbox" name="cbox"/>3<br/> <input type="checkbox" name="cbox"/>4<br/> <input type="checkbox" name="cbox"/>4<br/> <input type="checkbox" name="cbox"/>5<br/> <input type="checkbox" name="cbox"/>7<br/> <input type="checkbox" name="cbox"/>8<br/> <input type="checkbox" name="cbox"/>9<br/> <input type="button" value="反選" id="btn"/> </div> </body> </html>