单击另一个复选框后复选框显示已选中

Question

有一个带有复选框的树结构。已经讨论过Previously asked

我面临的问题是，当我单击一个项目时，它已选中但未在控制台中显示已选中。 当我单击另一个项目时，第一个项目显示在清单中，但当前未单击项目。单击另一个项目后，该项目将显示在那里。

所以，它正在工作，但不是在我单击该项目时，而是在单击另一个项目之后。

$(document).ready(function() {
  var toggle = function() {
    //var id = $(this).parent().find('input:first')[0].id;
    //$("#"+id).find("input").prop('checked', 'checked');
    //$(this).find("input").prop('checked', true);
    //console.log($(this).parent().find('input:first')[0].id);
    if (!$(this).closest("li").find("ul:first").is(":visible") && $(this).closest("li").is(":visible")) {
      //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();
    console.log($('input[name="level1"]:checked'));
    console.log($('input[name="level2"]:checked'));
    console.log($('input[name="level3"]:checked'));
  };
  $(".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/2.1.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="level1" id="Parent_1">
        <label class="Collapsable" for="Parent_1">
          <span></span> Parent_1
        </label>
        <ul>
          <li>
            <input type="checkbox" name="level2" id="Child_1_1">
            <label class="Collapsable" for="Child_1_1">
              <span></span> Child_1_1
            </label>
          </li>
          <li>
            <input type="checkbox" name="level2" id="Child_1_2">
            <label class="Collapsable" for="Child_1_2">
              <span></span> Child_1_2
            </label>
            <ul>
              <li>
                <input type="checkbox" name="level3" id="Grand_Child_1_2_1">
                <label class="Collapsable" for="Grand_Child_1_2_1">
                  <span></span> Grand_Child_1_2_2
                </label>
              </li>
              <li>
                <input type="checkbox" name="level3" id="Grand_Child_1_2_2">
                <label class="Collapsable" for="Grand_Child_1_2_2">
                  <span></span> Grand_Child_1_2_2
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" name="level1" id="Parent_2">
        <label class="Collapsable" for="Parent_2">
          <span></span> Parent_2
        </label>
        <ul>
          <li>
            <input type="checkbox" name="level2" id="Child_2_1">
            <label class="Collapsable" for="Child_2_1">
              <span></span> Child_2_1
            </label>
          </li>
          <li>
            <input type="checkbox" name="level2" id="Child_2_2">
            <label class="Collapsable" for="Child_2_2">
              <span></span> Child_2_2
            </label>
            <ul>
              <li>
                <input type="checkbox" name="level3" id="Grand_Child_2_2_1">
                <label class="Collapsable" for="Grand_Child_2_2_1">
                  <span></span> Grand_Child_2_2_2
                </label>
              </li>
              <li>
                <input type="checkbox" name="level3" id="Grand_Child_2_2_2">
                <label class="Collapsable" for="Grand_Child_2_2_2">
                  <span></span> Grand_Child_2_2_2
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" name="level1" id="Parent_3">
        <label class="Collapsable" for="Parent_3">
          <span></span> Parent_3
        </label>
        <ul>
          <li>
            <input type="checkbox" name="level2" id="Child_3_1">
            <label class="Collapsable" for="Child_3_1">
              <span></span> Child_3_1
            </label>
            <ul>
              <li>
                <input type="checkbox" name="level3" id="Grand_Child_3_1_1">
                <label class="Collapsable" for="Grand_Child_3_1_1">
                  <span></span> Grand_Child_3_1_1
                </label>
              </li>
              <li>
                <input type="checkbox" name="level3" id="Grand_Child_3_1_2">
                <label class="Collapsable" for="Grand_Child_3_1_2">
                  <span></span> Grand_Child_3_1_2
                </label>
              </li>
            </ul>
          </li>
          <li>
            <input type="checkbox" name="level2" id="Child_3_1">
            <label class="Collapsable" for="Child_3_1">
              <span></span> Child_3_1
            </label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

复选框有什么问题..？我错过了什么吗？

代码在 sn-p 上运行时花费的时间太长，参考 JSFIDDLE

Answer 1

当您点击一个标签时，在标签的点击处理程序返回后才会点击相关的复选框。因此，当标签的处理程序正在运行时，该复选框尚未选中。

您应该将点击处理程序放在复选框而不是标签上。但是这段代码不能正常工作：

$(this).parent().children().toggle();
$(this).toggle();

因为$(this) 不是标签，而是复选框。结果，当您单击它时，标签会消失。将该代码更改为：

$(this).parent().children().toggle();
if ($(this).is(":checkbox")){
    $(`label[for=${this.id}]`).toggle();
} else {
    $(this).toggle();
}

因此，当您从复选框单击处理程序中调用 toggle() 时，它会切换此复选框的标签。

DEMO - 只有前两个复选框具有在事件绑定中使用的 Collapsable 类，因此单击其余复选框不会执行任何操作。