首頁 > 開發者 > JavaScript
jQuery對checkbox 複選框的全選全不選反選的操作，jquerycheckbox
先給大家展示下，如果大家感覺還不錯，請繼續參考實現代碼。
HTML代碼：
<body><ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.時間都去哪兒了</label></li> <li><label><input type="checkbox" name="items" value="2"> 2.海闊天空</label></li> <li><label><input type="checkbox" name="items" value="3"> 3.真的愛你</label></li> <li><label><input type="checkbox" name="items" value="4"> 4.不再猶豫</label></li> <li><label><input type="checkbox" name="items" value="5"> 5.光輝歲月</label></li> <li><label><input type="checkbox" name="items" value="6"> 6.喜歡妳</label></li> </ul> <input type="checkbox" id="all"> 全選/全不選</br><input type="button" value="全選" class="btn" id="selectAll"> <input type="button" value="全不選" class="btn" id="unSelect"> <input type="button" value="反選" class="btn" id="reverse"> <input type="button" value="獲得選中的所有值" id="btn" id="getValue"></body>
jquery代碼：
<script type="text/javascript">$(function(){//全選/全不選$("#all").click(function(){$("[name=items]:checkbox").attr("checked",this.checked);});$("[name=items]:checkbox").click(function(){var flag=true;$("[name=items]:checkbox").each(function(){if(!this.checked){flag=false;}});$("#all").attr("checked",flag);})//全選$("#selectAll").click(function(){$("[name=items]:checkbox").each(function(){$(this).attr("checked",true);});});//全不選$("#unSelect").click(function(){$("[name=items]:checkbox").each(function(){$(this).attr("checked",false);});});//反選$("#reverse").click(function(){$("[name=items]:checkbox").each(function(){ //遍曆每一個複選框//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取複選框的反向值this.checked=!this.checked; //js方法});});//輸出選中的值$("#btn").click(function(){var str="你選中的是：\r\n";$("[name=items]:checkbox:checked").each(function(){str+=$(this).val()+"\r\n";});alert(str);});})</script>
註：由於jquery版本的變更，新版本出現只能點擊一次，老一點的版本是可以的，新的版本不可以使用attr來設定選中狀態了，第一種解決方案是可以使用js原生的方法this.checked=true/false;
第二種解決方案是把attr換成prop。
以上所述是小編給大家介紹的jQuery對checkbox 複選框的全選全不選反選的操作，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
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
