选中并取消选中“全部选中”复选框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);
    }
  });
})