先看兩張圖：

圖一

圖二

上面2張圖在給客戶開發(fā)一個(gè)網(wǎng)站的時(shí)候，需要用到多選框，而且需要實(shí)現(xiàn)有個(gè)總開關(guān)，勾選后，下面全部選項(xiàng)均實(shí)現(xiàn)全部選中，去掉勾選，下面全部選項(xiàng)詩選全部去掉勾選，下面361模板網(wǎng)就把源碼和實(shí)現(xiàn)辦法分享給大家，這個(gè)是效果是JQ(jquery)實(shí)現(xiàn)復(fù)選框?qū)崿F(xiàn)全選 全不選 多選框全選實(shí)例。

源代碼大致分為2個(gè)部分：

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>

提醒一下：因?yàn)檫@個(gè)效果是JQ(jquery)實(shí)現(xiàn)復(fù)選框?qū)崿F(xiàn)全選 全不選 多選框全選實(shí)例，所有千萬不要忘記引入JQ庫

查看效果