选中并取消选中“全选”复选框 jquery/javascript [关闭]

Question

在页面加载时。我想检查check all 复选框。如果选中一行中的所有复选框（添加、编辑、删除、查看），如果未选中一行中的一个复选框（添加、编辑、删除、查看），则取消选中 check all 复选框。

请看附图。

这是我的html：

<input type="checkbox" class="check_one" name="chk_add[]"><br>
<input type="checkbox" class="check_one" name="chk_edit[]"><br>
<input type="checkbox" class="check_one" name="chk_delete[]"><br>
<input type="checkbox" class="check_one" name="chk_view[]"><br>
<input type="checkbox" class="select_all" name="select_all[]"><br>
<br><br>
<input type="checkbox" class="check_one" name="chk_add[]"><br>
<input type="checkbox" class="check_one" name="chk_edit[]"><br>
<input type="checkbox" class="check_one" name="chk_delete[]"><br>
<input type="checkbox" class="check_one" name="chk_view[]"><br>
<input type="checkbox" class="select_all" name="select_all[]"><br>
<br><br>
<input type="checkbox" class="check_one" name="chk_add[]"><br>
<input type="checkbox" class="check_one" name="chk_edit[]"><br>
<input type="checkbox" class="check_one" name="chk_delete[]"><br>
<input type="checkbox" class="check_one" name="chk_view[]"><br>
<input type="checkbox" class="select_all" name="select_all[]"><br>

Answer 1

这是我的示例fiddle

HTML：

    <table>
<tbody>
  <tr>
    <td><input type="checkbox" class="check_one" name="chk_add[]" checked></td>
    <td><input type="checkbox" class="check_one" name="chk_edit[]" checked></td>
    <td><input type="checkbox" class="check_one" name="chk_delete[]" checked></td>
    <td><input type="checkbox" class="check_one" name="chk_view[]" checked></td>
    <td><input type="checkbox" class="select_all" name="select_all[]"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check_one" name="chk_add[]"></td>
    <td><input type="checkbox" class="check_one" name="chk_edit[]"></td>
    <td><input type="checkbox" class="check_one" name="chk_delete[]" checked></td>
    <td><input type="checkbox" class="check_one" name="chk_view[]"></td>
    <td><input type="checkbox" class="select_all" name="select_all[]"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check_one" name="chk_add[]"></td>
    <td><input type="checkbox" class="check_one" name="chk_edit[]"></td>
    <td><input type="checkbox" class="check_one" name="chk_delete[]"></td>
    <td><input type="checkbox" class="check_one" name="chk_view[]"></td>
    <td><input type="checkbox" class="select_all" name="select_all[]"></td>
  </tr>
</tbody>
</table>

JS：

    $(document).ready(function(){
    var rows = $("table tbody tr");
  $.each(rows, function(i,children) {
    var checked = $(children).find(".check_one").first().prop("checked");
    var total_checked = 1;
    $.each($(children).find(".check_one"),function(j,child){
        if($(child).prop("checked") != checked){
        total_checked = 0;
      }
    });
    if(total_checked == 1){
        $(children).find(".select_all").first().prop("checked",checked);
    }
  });
})