checkbox全选/反选的实现

实现思想

    全选checkbox的click事件和每行的单个checkbox的click事件分别都要实现。

    1.全选checkbox的click事件：

       如果全选checkbox的状态如果为选中(checked)时，每行的单个checkbox的checked属性全部设置为true;

       反之，则设置为false.

    2.每行的单个checkbox的click事件

      如果该行的checkbox未选中时,全选checkbox的checked属性全部设置为false;

      反之，则判断所有行的checkbox都被选中时，则全选checkbox设置为true.

上面2的实现容易被忽视。

Html实现：

    <script type="text/javascript">
    
    // 初始化DOM加载
    $(function(){
     
        // 全选/反选
        checkAll("chkAll", "chkItem");       
        
    });

    </script>

......

  <div id="listHeader">
            <table class="listTb">
                <tr class="listTr">
                    <td width="5%" class="listTd" align="left">
                        <input id="chkAll" name="chkAll" type="checkbox"  />
                    </td>
                    <th width="10%" class="listTh">No</th>
                </tr>
             </table>
  </div>

<div id="listData">
            <table class="listTb">
                   <tr class="listTr">
                        <td width="5%" class="listTd" align="center">
                            <input id="chkItem" name="chkItem" type="checkbox" value="1" />
                        </td>
                        <td width="10%" class="listTd">1</td>
                     
                    </tr>
                   <tr class="listTr">
                        <td width="5%" class="listTd" align="center">
                            <input id="chkItem" name="chkItem" type="checkbox" value="2" />
                        </td>
                        <td width="10%" class="listTd">2</td>                
                    </tr>
                       <tr class="listTr">
                        <td width="5%" class="listTd" align="center">
                            <input id="chkItem" name="chkItem" type="checkbox" value="3" />
                        </td>
                        <td width="10%" class="listTd">3</td>                
                    </tr>    
            </table>
            
  </div>

......

js实现：

/**

      *全选/反选
      * @para chkAllId 全选checkbox的id
      * @para chkSubName 每行单个checkbox的name
    */
    function checkAll(chkAllId, chkSubName) {
        var objAll = $("#"+chkAllId);
        var objSub =  $("[name = "+chkSubName+"]:checkbox");
        // 全选按钮
        objAll.click(function(){
            if ($(this).is(':checked')) {  
                objSub.prop("checked", true);
            } else {  
                objSub.prop("checked", false);
            }  
           });
        
        // 每行的单选框选中时
        objSub.click(function(){
            //当没有选中某个子复选框时，SelectAll取消选中  
            if (!$(this).is(':checked')) {  
                objAll.prop("checked", false);  
            }  
            var chsub = objSub.length; //获取subcheck的个数  
            var checkedsub = $("[name = "+chkSubName+"]:checkbox:checked").length; //获取选中的subcheck的个数  
            if (checkedsub == chsub) {
                objAll.prop("checked", true);   
            }  
        });
    }