当所有子复选框都选中/取消选中时，选中/取消选中主复选框

Question

我目前正在向我的网站添加复选框并添加一些 jquery，以便当用户选中主题复选框时，它会检查所有子主题复选框。我已经使用下面的代码完成了这个工作。

我似乎无法开始工作的是，当用户选中所有子主题复选框时，它会检查主题复选框，而当用户取消选中子主题时，它会取消选中主题复选框。

任何帮助都会很棒

当前 jquery

$(document).ready(function () {
    $(".topic input").click(function () {
        $(this).parents("tr").find("input").prop('checked', (this.checked ? "checked" : ""));

    })

Html

<div class="topic">
     <input type="checkbox" name="topic" value="1">
     <span>Topic 1</span>
</div>

<div class="subtopic">
   <ul class="inputs-list">
      <li>
         <input type="checkbox" checked="" name="subtopic" value="1">
         <span>subtopic 1</span>
      </li>
      <li>
         <input type="checkbox" checked="" name="subtopic" value="2">
         <span>subtopic 2</span>
      </li>
      <li>
         <input type="checkbox" checked="" name="subtopic" value="3">
         <span>subtopic 3</span>
      </li>
    </ul>
</div>

Answer 1

$(document).ready(function () {

    $(".topic input[type='checkbox']").click(function(){
        var is_checked=$(this).is(":checked");
        $(".inputs-list").find('input').prop("checked",is_checked);
    });
    $(".inputs-list > li > input[type='checkbox']").click(function() {
        is_checked=$(this).is(":checked");
        $(".topic input[type='checkbox']").prop("checked",(!is_checked)?is_checked:true);
    });
});

<div class="topic">
         <input type="checkbox" name="topic"  class="topic" value="1">
         <span>Topic 1</span>
        </div>

    <div class="subtopic">
       <ul class="inputs-list">
          <li>
             <input type="checkbox"  name="subtopic" value="1">
             <span>subtopic 1</span>
          </li>
          <li>
             <input type="checkbox"  name="subtopic" value="2">
             <span>subtopic 2</span>
          </li>
          <li>
             <input type="checkbox"  name="subtopic" value="3">
             <span>subtopic 3</span>
          </li>
        </ul>
    </div>

Answer 2

因此，您有两个事件：

1. 如果检查了主题，则将检查添加到子主题

2. 如果检查了子主题，则从主题中删除检查

   $(文档).ready(function () {
       $(".topic input[type='checkbox']").click(function() {
           var context = $(this).parents("tr");
           $(".subtopic input[type='checkbox']").attr("已选中", "已选中");
       });
       $(".subtopic input[type='checkbox']").click(function() {
           var context = $(this).parents("tr");
           $(".topic input[type='checkbox']").removeAttr("checked");
       });
   });
   

Answer 3

第一个更改事件处理程序用于主题选择，第二个更改用于子主题取消选中

$(document).ready(function(){
    $("[name='topic']").change(function(){
    if($(this).attr("checked") == "checked")
    {
        $("[name='subtopic']").attr("checked",true);
    }
    else
    {
        $("[name='subtopic']").attr("checked",false);
    }
});
    $("[name='subtopic']").change(function(){
        if($("[name='subtopic']:checked").length == 0)
    {
        $("[name='topic']").attr("checked",false);
    }
});
});