javascript - 选中/取消选中所有子复选框时选中/取消选中主复选框

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>