javascript - 如何在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>

最佳答案

在输入元素周围包裹一个标签，然后将id移到它上面。

然后调整jquery，以便代替目标同级，而必须转到父同级。

概念验证：我在主复选框旁边添加了红色边框。

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>