【jQuery】複選框的全選、反選，判斷哪些複選框被選中，jquery全選
本文與《【JavaScript】複選框的全選、反選，判斷哪些複選框被選中》（點擊開啟連結）為姊妹篇，把裡面內容再與jQuery架構中實現一次，同樣做到如下的效果：
布局還是同樣的布局，只是由於在jQuery架構中，無須再為按鈕，指定特定的onclick事件處理函數，直接使用jQuery指定即可：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>全選、反選</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script> </head> <body><button id="selected"/>哪裡複選框被選中？ </button><button id="selectAll"/>全選</button><button id="selectReserve"/>反選</button><br/>1<input type="checkbox" name="checkBoxGroup" value="1"/><br/>2<input type="checkbox" name="checkBoxGroup" value="2"/><br/>3<input type="checkbox" name="checkBoxGroup" value="3"/><br/>4<input type="checkbox" name="checkBoxGroup" value="4"/><br/></body></html>之後在jQuery中，取name為checkBoxGroup的複選框數組，直接可以這樣寫：$(":checkbox[name='checkBoxGroup']")，當然$("input[type='checkbox'][name='checkBoxGroup']")也行，只是$(":checkbox[name='checkBoxGroup']")代碼更加簡單，注意checkbox前面的冒號。拿出來的東西是與Javascript的document.getElementsByName("xx")一樣，同位複選框數組。只是在jQuery中可以直接利用each去遍曆。為複選框設定選中與否使用prop，不要用attr，具體在《【jQuery】對於複選框操作的attr與prop》（點擊開啟連結）已經說過了。
<script type="text/javascript">//哪裡複選框被選中？$("#selected").click(function(){var str="被選中的複選框：";$(":checkbox[name='checkBoxGroup']:checked").each(function(){str+=$(this).val()+",";});alert(str);});//全選$("#selectAll").click(function(){$(":checkbox[name='checkBoxGroup']").each(function(){$(this).prop("checked",true);});});//反選$("#selectReserve").click(function(){$(":checkbox[name='checkBoxGroup']").each(function(){$(this).prop("checked",!$(this).prop("checked"));});});</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
