许多复选框组和“全选”

时间：2019-09-11 10:48:15

标签： jquery checkbox

我有8组复选框。每个都有一个“主”和8到12个子复选框，并尝试为每个组创建“取消/全选”行为。

我发现这个 https://stackoverflow.com/a/25697142/9098325，但只显示一组复选框。

我在这里用我不起作用的解决方案进行了摆弄：https://jsfiddle.net/ex4rnq83/ 

$('.outer').on('click', function() {
  if (this.checked) {
    $('.inner').each(function() {
      this.checked = true;
    });
  } else {
    $('.inner').each(function() {
      this.checked = false;
    });
  }
});

$('.inner').on('click', function() {
  if ($(this).is(":checked")) {
    var isAllChecked = 0;

    $(".inner").each(function() {
      if (!this.checked)
        isAllChecked = 1;
    });

    if (isAllChecked == 0) {
      $(".outer").prop("checked", true);
    }
  } else {
    $(".outer").prop("checked", false);
  }
});
ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="out1" class="outer">
    <label for="out1">Checkbox Out 1</label>
  </li>
  <ul>
    <li>
      <input type="checkbox" id="inner1" class="inner">
      <label for="out1">Checkbox Inner 1</label>
    </li>
    <li>
      <input type="checkbox" id="inner2" class="inner">
      <label for="out1">Checkbox Inner 2</label>
    </li>
    <li>
      <input type="checkbox" id="inner3" class="inner">
      <label for="out1">Checkbox Inner 3</label>
    </li>
  </ul>
  <li>
    <input type="checkbox" id="out2" class="outer">
    <label for="out1">Checkbox Out 2</label>
  </li>
  <ul>
    <li>
      <input type="checkbox" id="inner4" class="inner">
      <label for="out1">Checkbox Inner 4</label>
    </li>
    <li>
      <input type="checkbox" id="inner5" class="inner">
      <label for="out1">Checkbox Inner 5</label>
    </li>
  </ul>
</ul>

4 个答案:

答案 0 :(得分：4)

首先，如果您更正HTML，以使子ul在父li内，则这将变得更加简单。选中复选框后，您可以轻松地遍历DOM来查找子复选框，并将其checked状态设置为匹配。

类似地，您可以得到同级复选框的选中状态。如果全部选中，则应选中任何父复选框。像这样：

$(':checkbox').on('change', function() {
  // check children
  $(this).closest('li').find(':checkbox').prop('checked', this.checked);

  // check parent if all children checked
  var $ul = $(this).closest('ul');
  var $siblings = $ul.find('> li > label > :checkbox');
  var allChecked = $siblings.length == $siblings.filter(':checked').length;
  $ul.closest('li').find('> label > :checkbox').prop('checked', allChecked);
});
ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <label><input type="checkbox">Checkbox Out 1</label>
    <ul>
      <li>
        <label><input type="checkbox">Checkbox Inner 1</label>
      </li>
      <li>
        <label><input type="checkbox">Checkbox Inner 2</label>
      </li>
      <li>
        <label><input type="checkbox">Checkbox Inner 3</label>
      </li>
    </ul>
  </li>
  <li>
    <label><input type="checkbox">Checkbox Out 2</label>
    <ul>
      <li>
        <label><input type="checkbox">Checkbox Inner 4</label>
      </li>
      <li>
        <label><input type="checkbox">Checkbox Inner 5</label>
      </li>
    </ul>
  </li>
</ul>

请注意，这完全不需要任何唯一的id属性，因为逻辑依赖于DOM结构，并且label元素已移动以包装与它们相关的复选框。 inner和outer类属性也已被删除，因为它们在正确嵌套ul / li时变得多余。

答案 1 :(得分：1)

这是一个可行的例子

如果选中了所有子元素或少于所有子元素，它将切换下一个UL的子元素，并切换外部复选框。

我更正了无效的HTML，使UL成为LI的子级，而不是另一个UL 

$('.outer').on('click', function() {
  var chk = this.checked;
  $(this).closest("li").find(".inner").each(function() {
    this.checked = chk;
  });
});

$('.inner').on('click', function() {
  var $parent = $(this).closest("ul"),
    $inner = $parent.find(".inner"),
    $checked = $parent.find(".inner:checked"),
    $outer = $parent.closest("li").find(".outer"),
    chk = $inner.length === $checked.length ? this.checked : false;
  $outer.prop("checked", chk)
});
ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="out1" class="outer"><label for="out1">Checkbox Out 1</label>
    <ul>
      <li><input type="checkbox" id="inner1" class="inner"><label for="out1">Checkbox Inner 1</label></li>
      <li><input type="checkbox" id="inner2" class="inner"><label for="out1">Checkbox Inner 2</label></li>
      <li><input type="checkbox" id="inner3" class="inner"><label for="out1">Checkbox Inner 3</label></li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="out2" class="outer"><label for="out1">Checkbox Out 2</label>
    <ul>
      <li><input type="checkbox" id="inner4" class="inner"><label for="out1">Checkbox Inner 4</label></li>
      <li><input type="checkbox" id="inner5" class="inner"><label for="out1">Checkbox Inner 5</label></li>
    </ul>
  </li>
</ul>

答案 2 :(得分：0)

我通过有效的方法修改了您的问题。

只需将$(".inner").each替换为$(this).parent().next().find('li input').each或其他正确的选择器即可。

$('.outer').on('click', function() {
  if (this.checked) {
    $(this).parent().next().find('li input').each(function() {
      this.checked = true;
    });
  } else {
    $(this).parent().next().find('li input').each(function() {
      this.checked = false;
    });
  }
});

$('.inner').on('click', function() {
  if ($(this).is(":checked")) {
    var isAllChecked = 0;

    $(".inner").each(function() {
      if (!this.checked)
        isAllChecked = 1;
    });

    if (isAllChecked == 0) {
      $(".outer").prop("checked", true);
    }
  } else {
    $(".outer").prop("checked", false);
  }
});
ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="checkbox" id="out1" class="outer">
    <label for="out1">Checkbox Out 1</label>
  </li>
  <ul>
    <li>
      <input type="checkbox" id="inner1" class="inner">
      <label for="out1">Checkbox Inner 1</label>
    </li>
    <li>
      <input type="checkbox" id="inner2" class="inner">
      <label for="out1">Checkbox Inner 2</label>
    </li>
    <li>
      <input type="checkbox" id="inner3" class="inner">
      <label for="out1">Checkbox Inner 3</label>
    </li>
  </ul>
  <li>
    <input type="checkbox" id="out2" class="outer">
    <label for="out1">Checkbox Out 2</label>
  </li>
  <ul>
    <li>
      <input type="checkbox" id="inner4" class="inner">
      <label for="out1">Checkbox Inner 4</label>
    </li>
    <li>
      <input type="checkbox" id="inner5" class="inner">
      <label for="out1">Checkbox Inner 5</label>
    </li>
  </ul>
</ul>

答案 3 :(得分：0)

更改此：

$('.outer').on('click', function() {
  if (this.checked) {
    $('.inner').each(function() {
      this.checked = true;
    });
  } else {
    $('.inner').each(function() {
      this.checked = false;
    });
  }
});

对此：

$('.outer').on('click',function(){
    if(this.checked){

        $(this).parent().next("ul").children('li').children('.inner').each(function(){
            this.checked = true;
        });
  }else{
        $(this).parent().next("ul").children('li').children('.inner').each(function(){
            this.checked = false;
    });
  }
});

jquery将首先选择父级，然后选择ul，然后选择所有具有“内部”类的输入。

还可以将js代码的结尾部分更改为此：

    $('.inner').on('click',function(){
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(this).parent().parent().children('li').children('.inner').each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $(this).parent().parent().prev('li').children('.outer').prop("checked", true);
            }
        }
        else {
            console.log()
            $(this).parent().parent().prev('li').children('.outer').prop("checked", false);
        }

它将在内部类之前选择外部输入

相关问题
最新问题