Question

这是我的头脑。我有一个2级列表，可以很好地运行一些jQuery。我想捕捉顶部复选框（＆＃39;主复选框＆＃39;）以在CSS中设置样式并在其周围悬停边框，但我似乎无法访问它。在输入标签周围包装标签会弄乱我的jQuery并且似乎无论如何都没有帮助。任何关于我做错的人的想法？ Fiddle

＆＃13;

$('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;
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

在输入元素周围包裹标签并将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>

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

1 个答案: