使用jQuery选中所有同组的checkbox

jQuery在页面获取checkbox数组时：

 

   使用 var num = $("input:checkbox[name=cbx]:checked'").length; 即可获得所有name属性为"cbx"的checkbox数组。通过length属性即可得到数组长度。

    取id="cbxAll"是有讲究的，因为id="cbxAll"的话，相当于点了这个checkbox就是全选，再点一次就全部取消选中。

<input type="checkbox" id="cbxAll" value=""/>

 

$(function() {
    var cbxLength = $("input[name='cbx']").length;
    var selCbxLength = 0;
    $("input[name='cbx']").each(function() {
        if ($(this).attr("checked") == true) {
            selCbxLength++;
            $(this).parents("tr").addClass('selected');
            $(this).parents("tr").attr('cbxSelect', 'Y');
        }
    });
    $("#cbxAll").click(function() {
        if ($(this).attr("checked") == true) {
            selCbxLength = cbxLength;
            $("input[name='cbx']").each(function() {
                $(this).attr("checked", true);
                $(this).parents("tr").addClass('selected');
                $(this).parents("tr").attr('cbxSelect', 'Y');
            });
        } else {
            selCbxLength = 0;
            $("input[name='cbx']").each(function() {
                $(this).attr("checked", false);
                $(this).parents("tr").removeClass('selected');
                $(this).parents("tr").attr('cbxSelect', 'N');
            });

        }
    });
    
    $("input[name='cbx']").each(function() {
        $(this).click(function() {
            event.cancelBubble = true; 
            if ($(this).attr("checked") == true) {
                selCbxLength++;
                $(this).parents("tr").addClass('selected');
                $(this).parents("tr").attr('cbxSelect', 'Y');
            } else {
                selCbxLength--;
                $(this).parents("tr").removeClass('selected');
                $(this).parents("tr").attr('cbxSelect', 'N');
            }
            if ($(this).attr("checked") == true) {
                if (selCbxLength == cbxLength) {
                    $("#cbxAll").attr("checked", true);
                }
            } else {
                $("#cbxAll").attr("checked", false);
            }
        });
    });
    
    $(".list>tbody tr").hover(function(){
        $(this).addClass("selected");
      }, function(){
        var f = $(this).attr("cbxSelect");
        if (f != 'Y') {
            $(this).removeClass("selected");
        }
    });

.list{width:754px;background:url(../images/table_bg.gif) left top repeat-x; border:1px solid #d1dbff; border-top:none!important;}
.selected {background: url(../images/td_bg.jpg) left top repeat-x #d9f79d;}

<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="list">
    <thead>
                      <tr>
                        <th><input type="checkbox" id="cbxAll" value=""/></th>
                        <th>编号</th>
                        <th>名称 </th>
                        <th>时期</th>
                        <th>金额</th>
                        <th>日期</th>
                        <th>备注</th>
                        <th>次数</th>
                      </tr>
   </thead>
   <tbody>
               <tr>
                        <td><input type="checkbox" name="cbx" value=""/></td>
                        <td>1251321313131 </td>
                        <td>高尔夫球及球具</td>
                        <td>2010-01</td>
                        <td>100.00</td>
                        <td>2010-01-01</td>
                        <td>无</td>
                        <td class="num">2</td>
                      </tr>
                      <tr>
                        <td><input type="checkbox" name="cbx" value=""/></td>
                        <td>1251321313131 </td>
                        <td>高尔夫球及球具</td>
                        <td>2010-01</td>
                        <td>100.00</td>
                        <td>2010-01-01</td>
                        <td>无</td>
                        <td class="num">4</td>
                      </tr>
                      <tr>
                        <td><input type="checkbox" name="cbx" value=""/></td>
                        <td>1251321313131 </td>
                        <td>高尔夫球及球具</td>
                        <td>2010-01</td>
                        <td>100.00</td>
                        <td>2010-01-01</td>
                        <td>无</td>
                        <td class="num">3</td>
             </tr>
   </tbody>
</table>