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 context = $(this).parents("tr");
        $(".subtopic input[type='checkbox']").attr("checked", "checked");
    });
    $(".subtopic input[type='checkbox']").click(function() {
        var context = $(this).parents("tr");
        $(".topic input[type='checkbox']").removeAttr("checked");
    });
});

Answer 2

$(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 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);
    }
});
});

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

3 个答案: