默认情况下显示复选框

Question

它是一个具有"+“和"-”符号的树结构，用于指示项目是否有子项。它的作用应该是：

• 首先，所有带有"+“符号的项目
• 如果选中该项或选中say复选框，则符号转换为"-“。
• 如果未选中项或表示复选框未选中，则符号转换为"+“。

它的运作方式：

• 首先，所有项目都未选中，"+“符号在那里
• 单击任何项目时，该项目首先不被选中，并保持为"+“符号。
• 单击所选项目时，项目将被选中并更改为"-“符号。

JSFIDDLE

​

$(document).ready(function() {
  var toggle = function() {
    if (($(this).parent().find("input").is(':checked'))) {
      console.log("checked");
      $(this).parent('li:has(>ul)').find("span:first").removeClass("glyphicon glyphicon-plus-sign").addClass("glyphicon glyphicon-minus-sign");
    } else {
      console.log("unchecked");
      $(this).parent('li:has(>ul)').find("span:first").removeClass("glyphicon glyphicon-minus-sign").addClass("glyphicon glyphicon-plus-sign");
    }
    $(this).parent().children().toggle();
    $(this).toggle();
  };
  $(".Collapsable").click(toggle);
  $(".Collapsable").each(toggle);
  $('.tree li:not(:has(>ul))').find("span:first").addClass("glyphicon glyphicon-bookmark");
});

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree ul {
  margin-left: 0px;
}

ul.tree li {
  margin: 0;
  margin-left: 20px;
  padding: 0 7px;
  line-height: 20px;
  color: #369;
  font-weight: bold;
  border-left: 1px solid rgb(100, 100, 100);
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -0.3em;
  height: 1em;
  width: 12px;
  color: white;
  border-bottom: 5px solid rgb(100, 100, 100);
  content: "";
  display: inline-block;
  left: -7px;
}

ul.tree li:last-child:before {
  border-left: 1px solid rgb(100, 100, 100);
}

input[type=checkbox] {
  position: absolute;
  margin-top: 4px\9;
  margin-left: -20px;
  visibility: hidden;
}

input[type=checkbox]+label {
  display: initial;
}

input[type=checkbox]:checked+label {
  color: #f00;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <ul class="tree">
      <li>
        <input type="checkbox" name="chkname1" id="chk1">
        <label class="Collapsable" for="chk1">
                  <span></span>
                    One
                </label>
        <ul>
          <li>
            <input type="checkbox" name="chkname1_1" id="chk1_1">
            <label class="Collapsable" for="chk1_1">
                        <span></span>
                        One-1
                        </label>
          </li>
          <li>
            <input type="checkbox" name="chkname1_2" id="chk1_2">
            <label class="Collapsable" for="chk1_2">
                        <span></span>
                        One-2
                        </label>
            <ul>
              <li>
                <input type="checkbox" name="chkname1_1_1" id="chk1_1_1">
                <label class="Collapsable" for="chk1_1_1">
                                <span></span>
                                One-1-1-1
                                </label>
              </li>
              <li>
                <input type="checkbox" name="chkname1_1_2" id="chk1_1_2">
                <label class="Collapsable" for="chk1_1_2">
                                <span></span>
                                One-1-1-2
                                </label>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><input type="checkbox" name="chkname2" id="chk2">
        <label class="Collapsable" for="chk2">
                <span></span> 
                Two
                </label>
        <ul>
          <li>
            <input type="checkbox" name="chkname2_1" id="chk2_1">
            <label class="Collapsable" for="chk2_1">
                        <span></span>
                        Two-1
                        </label>
            <ul>
              <li>
                <input type="checkbox" name="chkname2_1_1" id="chk2_1_1">
                <label class="Collapsable" for="chk2_1_1">
                                <span></span>Two-1-1</label>
              </li>
              <li>
                <input type="checkbox" name="chkname2_1_2" id="chk2_1_2">
                <label class="Collapsable" for="chk2_1_2">
                                <span></span>Two-1-2</label>
              </li>
            </ul>
          </li>
          <li>
            <input type="checkbox" name="chkname2_2" id="chk2_2">
            <label class="Collapsable" for="chk2_2">
                        <span></span>Two-2</label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

​

为什么它在第一次点击时显示未被检查？符号也在相应地变化。但不对。

Answer 1

你能检查一下这个https://jsfiddle.net/jfc8Lqk4/5/吗？

我通过检查ul项的可见状态来更新代码，而不是检查复选框是否选中如下

if (!$(this).closest("li").find("ul:first").is(":visible") && $(this).closest("li").is(":visible")) {