Question

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

我面临的问题是，当我点击某个项目时，它已经检查但未在控制台中显示已检查。当我点击另一个项目时，第一个项目显示在检查列表中但不是当前单击的项目。点击另一个项目后，此项目将显示在那里。

所以，它正在工作，但当我点击该项目时却没有，但点击了另一个项目后。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

代码在代码片段上运行时花费的时间过长，对于ref 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类，因此点击其余部分不会做任何事情。

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

1 个答案: