javascript - 如何捕获 2 级列表中的顶部复选框并为其设置样式

Question

这让我费尽心思。我有一个 2 级列表，可以很好地与一些 jQuery 配合使用。我想捕获顶部复选框(“主复选框”)以在 CSS 中设置样式并在其周围悬停边框，但我似乎无法访问它。在输入标签周围包装一个标签会弄乱我的 jQuery，而且似乎无济于事。有人对我做错了什么有任何想法吗？ Fiddle

$('input[type=checkbox]').click(function() {
  $(this).next().find('input[type=checkbox]').prop('checked', this.checked);
  $(this).parents('ul').prev('input[type=checkbox]').prop('checked', function() {
    return $(this).next().find(':checked').length;
  });
});

.treeBOXClass {
  border: 1px solid green;
  width: 540px;
  height: 250px;
  font-family: "Verdana", Arial, serif;
  font-size: 13px;
  padding: 10px 0px 0px 20px;
  list-style-type: none;
  background: white;
}
.treeBOXClass ul li {
  color: blue;
  margin: 7px 0px 4px 12px;
  list-style-type: none;
}
.myFlexbox {
  display: -webkit-flex;
  display: flex;
  width: 450px;
  margin: 20px 0px 0px 0px;
  padding: 15px 0px 15px 0px;
  border: 1px solid blue;
}
.my_RH_Text {
  width: 350px;
  margin: 0px 0px 0px 20px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeBOXClass">
  <li>
    <input type="checkbox" id="mastercheckbox" value="yes" />Master checkbox
    <ul>
      <label for="HS1">
        <div class="myFlexbox">
          <li><input type="checkbox" id="HS1" value="one" />HS1</li>
          <div class="my_RH_Text">
            This is text that I have put in the first box as an example
          </div>
        </div>
      </label>
      <label for="HS2">
        <div class="myFlexbox">
          <li><input type="checkbox" id="HS2" value="one" />HS2</li>
          <div class="my_RH_Text">
            This is text that I have put in the second box as an example
          </div>
        </div>
      </label>
    </ul>
  </li><br>
</ul>

Answer 1

在输入元素周围包裹一个标签并将 id 移动到它。

然后调整 jquery，使其不再以 sibling 为目标，而是必须转到父级，然后是 sibling 。

概念证明:我在主复选框周围添加了红色边框。

PS:还将 ul 子元素包装在 li 标签中以获得有效的 html。

$('input[type=checkbox]').click(function() {
  $(this).parent().next().find('input[type=checkbox]').prop('checked', this.checked);
  $(this).parents('ul').prev().find('input[type=checkbox]').prop('checked', function() {
    return $(this).parent().next().find(':checked').length;
  });
});

#mastercheckbox {
  border:1px solid red;
}
.treeBOXClass {
  border: 1px solid green;
  width: 540px;
  height: 250px;
  font-family: "Verdana", Arial, serif;
  font-size: 13px;
  padding: 10px 0px 0px 20px;
  list-style-type: none;
  background: white;
}
.treeBOXClass ul li {
  color: blue;
  margin: 7px 0px 4px 12px;
  list-style-type: none;
}
.myFlexbox {
  display: -webkit-flex;
  display: flex;
  width: 450px;
  margin: 20px 0px 0px 0px;
  padding: 15px 0px 15px 0px;
  border: 1px solid blue;
}
.my_RH_Text {
  width: 350px;
  margin: 0px 0px 0px 20px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeBOXClass">
  <li>
    <label id="mastercheckbox"><input type="checkbox" value="yes" />Master checkbox</label>
    <ul>
      <li>
      <label for="HS1">
        <div class="myFlexbox">
          <input type="checkbox" id="HS1" value="one" />HS1
          <div class="my_RH_Text">
            This is text that I have put in the first box as an example
          </div>
        </div>
      </label>
        </li>
      <li>
      <label for="HS2">
        <div class="myFlexbox">
          <input type="checkbox" id="HS2" value="one" />HS2
          <div class="my_RH_Text">
            This is text that I have put in the second box as an example
          </div>
        </div>
      </label>
        </li>
    </ul>
  </li><br>
</ul>