Select the checkbox to use jQuery with all groups

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>

jQuery get checkbox array when the page:

 

   Use var num = $ ( "input: checkbox [name = cbx]: checked '") length; get all checkbox array name attribute is "cbx" a. Properties can be obtained by the length of the array.

    Take id = "cbxAll" is a luxurious, because id = "cbxAll" would be the equivalent point of this is to select all checkbox, and then point Uncheck all at once.

<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>

 

Reproduced in: https: //my.oschina.net/u/1167421/blog/546465