Question

这是一个树形结构，＆＃34; +＆＃34;和＆＃34; - ＆＃34;用于指示项目是否包含子项目的符号。它应该像：

首先，所有带孩子的物品都带有＆＃34; +＆＃34;符号
如果选中该项目或选中复选框，则该符号将转换为＆＃34; - ＆＃34;
如果取消选中该项目或取消选中复选框，该符号将转换为＆＃34; +＆＃34;

它如何运作：

首先，所有项目都未选中，＆＃34; +＆＃34;符号在那里
点击任意一个项目，项目首先取消选中并保持＆＃34; +＆＃34;符号
点击选中的项目，项目将被选中并更改为＆＃34; - ＆＃34;符号

＆＃13;

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

＆＃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/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>

＆＃13;

为什么首次点击时显示未选中状态？符号正在相应改变..但不正确。

Answer 1

你可以查看https://jsfiddle.net/jfc8Lqk4/5/

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

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

复选框默认显示已选中

1 个答案: