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

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>