如果未选中父复选框，则取消选中所有子项

Question

我正在创建一个带有多个复选框的页面。一些复选框是嵌套的，而其他则不是。如果选中一个特定的复选框，它将在其下方显示更多框，并带有可供选择的选项。如果未选中，它将隐藏子框。目前，仅使用CSS即可完成此操作。如果我选中父母以显示孩子，则不希望选中孩子框。我仔细检查并选中了需要的框，然后我将提交所有选中框的值，包括父框中的值。所有这些都很好。需要发生的是，如果父母中的任何一个不受检查，那么孩子们的不受检查。下面是我的代码。

input {
	position: absolute;
	left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}

label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

input:checked + label::before {
  background-color: #fff;
}

div {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked ~ #bodyparts {
  display: block;
}

#neck:checked ~ #direction {
	display: block;
}

<section>
	<input id="permitted" type="checkbox">
	<label for="permitted" class="side-label">Click to show more options</label>
	<div id="bodyparts">
		<input id="head" type="checkbox">
		<label for="head">head</label>
		
		<input id="neck" type="checkbox">
		<label for="neck">neck (click for more options)</label>
		
		<div id="direction">
			<input id="left" type="checkbox">
			<label for="left">left</label>
			
			<input id="right" type="checkbox">
			<label for="right">right</label>
			
			<input id="both" type="checkbox">
			<label for="both">both</label>
		</div>
		
		<input id="middle-back" type="checkbox">
		<label for="middle-back">middle back</label>
		
		<input id="lower-back" type="checkbox">
		<label for="lower-back">lower back</label>
	</div>
</section>

现在，如果我“取消选中”第一个选项，它将隐藏其他选项，但是即使它们被隐藏，它们也仍处于“选中”状态。

Answer 1

我将只展示如何实现这一目标，以展示该做什么。

由于您没有清晰的父子结构，因此您必须直接处理通过其id属性引用它们的元素：

neck.addEventListener('change', () => {
  if (neck.checked) [left, right, both].forEach(el => el.checked = false);
})

input {
  position: absolute;
  left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}

label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:hover,
input:focus+label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked+label {
  background-color: #ab576c;
}

input:checked+label::before {
  background-color: #fff;
}

div {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked~#bodyparts {
  display: block;
}

#neck:checked~#direction {
  display: block;
}

<section>
  <input id="permitted" type="checkbox">
  <label for="permitted" class="side-label">Click to show more options</label>
  <div id="bodyparts">
    <input id="head" type="checkbox">
    <label for="head">head</label>

    <input id="neck" type="checkbox">
    <label for="neck">neck (click for more options)</label>

    <div id="direction">
      <input id="left" type="checkbox">
      <label for="left">left</label>

      <input id="right" type="checkbox">
      <label for="right">right</label>

      <input id="both" type="checkbox">
      <label for="both">both</label>
    </div>

    <input id="middle-back" type="checkbox">
    <label for="middle-back">middle back</label>

    <input id="lower-back" type="checkbox">
    <label for="lower-back">lower back</label>
  </div>
</section>

Answer 2

您已经用jQuery标记了它，这很容易。在“其他信息”部分添加一个类，我们可以将其用作简单钩子，作为原始复选框的同级。

$(document).ready(function(){
$("input[type=checkbox]").on("click", function(){
    //if the checkbox has a sibling qwith the additional-info class
    if($(this).siblings(".additional-info").length > 0){
      //if the checkbox is uncheckd
      if(!$(this).is(":checked")){
        //uncehck the checkbox
        $(this).siblings(".additional-info").find("[type=checkbox]").prop("checked", false);
      }
    }
})
});

input {
	position: absolute;
	left: -9999px;
}

label {
  display: block;
  padding: 15px 30px 15px 15px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
  width: 300px;
}

label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

input:checked + label::before {
  background-color: #fff;
}

div {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked ~ #bodyparts {
  display: block;
}

#neck:checked ~ #direction {
	display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
	<input id="permitted" type="checkbox">
	<label for="permitted" class="side-label">Click to show more options</label>
	<div id="bodyparts">
		<input id="head" type="checkbox">
		<label for="head">head</label>
		
		<input id="neck" type="checkbox">
		<label for="neck">neck (click for more options)</label>
		
		<div id="direction" class="additional-info">
			<input id="left" type="checkbox">
			<label for="left">left</label>
			
			<input id="right" type="checkbox">
			<label for="right">right</label>
			
			<input id="both" type="checkbox">
			<label for="both">both</label>
		</div>
		
		<input id="middle-back" type="checkbox">
		<label for="middle-back">middle back</label>
		
		<input id="lower-back" type="checkbox">
		<label for="lower-back">lower back</label>
	</div>
</section>