先看兩張圖：

圖一

圖二

上面2張圖在給客戶開發一個網站的時候，需要用到多選框，而且需要實現有個總開關，勾選后，下面全部選項均實現全部選中，去掉勾選，下面全部選項詩選全部去掉勾選，下面361模板網就把源碼和實現辦法分享給大家，這個是效果是JQ(jquery)實現復選框實現全選 全不選 多選框全選實例。

源代碼大致分為2個部分：

1、js文件部分

<script type="text/javascript">   $(document).ready(function() {   // 全選/取消全部   $("#checkAllChange").click(function() {   if (this.checked == true) {   $(".userid").each(function() {   this.checked = true;   });   } else {   $(".userid").each(function() {   this.checked = false;   });   }   });   // 全選   $("#checkAll").click(function() {   $(".userid").each(function() {   this.checked = true;   });   });   // 取消全部   $("#removeAll").click(function() {   $(".userid").each(function() {   this.checked = false;   });   });   // 反選   $("#reverse").click(function() {   $(".userid").each(function() {   if (this.checked == true) {   this.checked = false;   } else {   this.checked = true;   }   })   });   //批量刪除   $("#delAll").click(function() {   var arrUserid = new Array();   $(".userid").each(function(i) {   if (this.checked == true) {   arrUserid[i] = $(this).val();   }   });   alert("批量刪除的:" + arrUserid);   });   });   </script>

2、HTML部分

<table border="1">   <tr>   <td><input type="checkbox" id="checkAllChange" /></td>   <td>用戶id</td>   <td>用戶名</td>   <td>電話</td>   <td>地址</td>   </tr>   <tr>   <td><input type="checkbox" class="userid" value="1" /></td>   <td>1</td>   <td>wangzs1</td>   <td>18888000</td>   <td>浦東</td>   </tr>   <tr>   <td><input type="checkbox" class="userid" value="2" /></td>   <td>2</td>   <td>wangzs2</td>   <td>18888001</td>   <td>上海</td>   </tr>   <tr>   <td><input type="checkbox" class="userid" value="3" /></td>   <td>3</td>   <td>wangzs3</td>   <td>18888002</td>   <td>河南</td>   </tr>   <tr>   <td><input type="checkbox" class="userid" value="4" /></td>   <td>4</td>   <td>wangzs4</td>   <td>18888003</td>   <td>許昌</td>   </tr>   <tr>   <td></td>   <td><input type="button" id="checkAll" value="全選" /></td>   <td><input type="button" id="removeAll" value="取消全部" /></td>   <td><input type="button" id="reverse" value="反選" /></td>   </tr>   <tr>   <td colspan="4" align="center"><input type="button" value="批量刪除" id="delAll"></td>   </tr>   </table>

提醒一下：因為這個效果是JQ(jquery)實現復選框實現全選 全不選 多選框全選實例，所有千萬不要忘記引入JQ庫

查看效果