js实现全选功能

HTML
<table class="table-normal">
    <thead>
        <tr>
          <th><input id="checkall" type="checkbox" class="aui-check"></th>
            <th>名称</th>
            <th>账号</th>
            <th>行业</th>
            <th>区域</th>
        </tr>
     </thead>
     <tbody>
       <tr>
         <td><input type="checkbox" class="aui-check" name="sub"></td>
         <td>1</td>
          <td>2</td>
          <td>3</td>
           <td>武汉</td>
        </tr>
      </tbody>
</table>

------------------------------------------------------------------------------------------------


CSS

.aui-check {
    width: 20px;
    height: 20px;
    position: relative;
    margin: 8px 10px;
    background: url(../img/check.png) no-repeat center;
    display: table;
    float: left;
    -webkit-appearance: none;
    transition: background-color ease 0.1s;
    text-align: center;
}
.aui-check:checked {
    background: url(../img/checked.png) no-repeat center;
}

------------------------------------------------------------------------------------------------

JS
$('#checkall').on('click', function() {
    $("input[name='sub']").prop("checked", this.checked);
 })
    
$("input[name='sub']").on('click', function() {
    var $subs = $("input[name='sub']");
    $(".checkall").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
})