jquery 选中当前组中的多个子复选框时，取消选中其他组中的子复选框

bvjveswy 于 2023-04-29 发布在 jQuery

关注(0)|答案(1)|浏览(260)

我创建了一个父/子复选框设置。选中父复选框后，将显示可以选中多个复选框的子复选框。
但我想取消选中其他组中的子复选框。因此，您一次只能选中某个组中的多个复选框。因为我只想保存复选框值的子组。
参见下面的设置，了解父/子复选框的设置

<ul class="acf-checkbox-list acf-bl">
<li data-id="354"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="354"> <span>topic 1</span></label><ul class="children acf-bl" style="display: block;">
<li data-id="377"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="377"> <span>subtopic a </span></label></li>
<li data-id="361"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="361"> <span>subtopic  b</span></label></li>
<li data-id="366"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="366"> <span>subtopic  c</span></label></li>
</ul>
</li>
<li data-id="372"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="372"> <span>topic 2</span></label><ul class="children acf-bl">
<li data-id="389"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="389"> <span>subtopic x</span></label></li>
<li data-id="399"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="399"> <span>subtopic  y</span></label></li>
</ul>
</li>
<li data-id="373"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="373"> <span>Topic 3</span></label><ul class="children acf-bl">
<li data-id="410"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="410"> <span>subtopic 1</span></label></li>
<li data-id="412"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="412"> <span>subtopic 2 </span></label></li>
<li data-id="409"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="409"> <span>subtopic 3</span></label></li>
</ul>
</li>
</li>
</ul>

const checkbox = document.querySelectorAll('.acf-checkbox-list > li > label > input');
checkbox.forEach(function(checkitem){
var value = checkitem.value;
checkitem.addEventListener('click', (event) => {
const parentli = document.querySelector('[data-id="'+value+'"]').querySelector('.children');
if (checkitem.checked) {
parentli.style.display = "block";
}
else {
parentli.style.display = "none";
}
})
});

.children {
  
  display:none;
}

提前感谢！

jquery

来源：https://stackoverflow.com/questions/76060530/uncheck-child-checkboxes-in-another-groups-when-checking-multiple-child-checkbox

1条答案

按热度按时间

qxsslcnc1#

每当你的子div中的复选框被选中时，你可以检查选中的输入的长度是否为> 0，根据这一点，你可以使用.not和prop从其他子div输入中删除选中的。

演示代码：

$(".acf-checkbox-list > li > label > input").click(function() {
  var closest_li = $(this).closest("li").find(".children"); //get closest children..
  if ($(this).is(":checked")) {
    closest_li.show() //hide/show
  } else {
    closest_li.hide()
  }
})

$(".children input").click(function() {

  var current_child_div = $(this).closest(".children")
  if (current_child_div.find("input:checked").length > 0) {
    $(".children").not(current_child_div)
      .find("input:checked").prop("checked", false); //get children div > input ignore current children div and uncheck -all
  }
})

.children {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="acf-checkbox-list acf-bl">
  <li data-id="354"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="354" checked> <span>topic 1</span></label>
    <ul class="children acf-bl" style="display: block;">
      <li data-id="377"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="377"> <span>subtopic a </span></label></li>
      <li data-id="361"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="361"> <span>subtopic  b</span></label></li>
      <li data-id="366"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="366"> <span>subtopic  c</span></label></li>
    </ul>
  </li>
  <li data-id="372"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="372"> <span>topic 2</span></label>
    <ul class="children acf-bl">
      <li data-id="389"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="389"> <span>subtopic x</span></label></li>
      <li data-id="399"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="399"> <span>subtopic  y</span></label></li>
    </ul>
  </li>
  <li data-id="373"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="373"> <span>Topic 3</span></label>
    <ul class="children acf-bl">
      <li data-id="410"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="410"> <span>subtopic 1</span></label></li>
      <li data-id="412"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="412"> <span>subtopic 2 </span></label></li>
      <li data-id="409"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="409"> <span>subtopic 3</span></label></li>
    </ul>
  </li>
  </li>
</ul>

赞(0）回复(0）举报 2023-04-29

我来回答

jquery 选中当前组中的多个子复选框时，取消选中其他组中的子复选框

1条答案

相关问题

热门标签

最新问答