为什么我的输入的初始状态被忽略了？

Question

请在下面查看我的 fiddle。带有嵌套复选框的复选框。更改功能工作正常：如果选中任何 $('#checkbox' + x)，则显示相应的 $('.entry' + x)，如果未选中，则隐藏。

我的复选框的初始状态被忽略，直到至少有一个复选框被点击。在示例中，最初显示所有 $('.entry' + x)，尽管最初选中了#checkbox1、-2 和 -3。但是：如果我然后取消选中#checkbox2，则仅显示 .entry1 和 .entry3，所有其他元素都会隐藏。从那时起，一切都按预期进行。

我试过以下方法：

$('#checkbox1').click(); 所以只是点击而不是“实际”点击（导致复选框 1 未被选中但在我点击任何复选框之前没有其他任何事情发生）
将复选框设置为 .prop('checked', true)（与 1 中的结果几乎相同）
我也用 if/else 语句试过

`

if ($('#checkbox' + x).prop('checked') == 'true') {
$('.entry' + x).show();
}
else{
$('.entry' + x).hide();
}`

仍然没有。在此示例中，如何控制复选框的初始状态？请帮帮我，我就是想不通。只是为了弄清楚我想要实现的目标：我希望能够将道具设置为选中并隐藏和显示 checked/unchecked“+ x”元素，并创建 .on('click', ...) 事件以在以后更改道具并让它们始终相应地表现。

 $(function () {
              // CHECKBOXES GROU AND NESTED CHECKBOXES HIDE/SHOW SYNCHRONIZING
              $.fn.nestedCheckboxes = function (stopPropogation) {
                this.addClass('nestedCheckboxes');
                this.on('click', ':has( > input[type=checkbox])', nestedCheckboxHandler);
                function nestedCheckboxHandler(evt) {
                  if ($(evt.target).is("input[type=checkbox]")) {
                    var parentContainer = $(this);
                    var checkbox = parentContainer
                      .find(' > input[type=checkbox]:eq(0)');
                    var parentCheckbox = parentContainer
                      .parent()
                      .closest(':has( > input[type=checkbox])')
                      .children('input[type=checkbox]');
        
                    if (evt.target == checkbox[0]) {
                      $('input[type=checkbox]', parentContainer)
                        .prop("checked", checkbox.prop("checked"));
                      $(function () {
                        $(new Array(5).fill(1).map((_, i) => i + 1)).each(function (idx, x) { // Array for the number of div elements
                          $('.entry' + x)[($('#checkbox' + x).prop("checked") ? "show" : "hide")](); // synchronize
        
                          $('#checkbox' + x).on('change', function () {      // toggle on change     
                            $('.entry' + x).toggle();
                          });
                        });
                      });
                    }
                    var parentCheckboxValue = !parentCheckbox
                      .parent()
                      .find("input[type=checkbox]")
                      .not(parentCheckbox[0])
                      .is("input[type=checkbox]:not(:checked)");
        
                    parentCheckbox.prop("checked", parentCheckboxValue);
                  } else if (stopPropogation) {
                    evt.stopPropagation();
                  }
                };
              };
                $('.treeX-container form').nestedCheckboxes();
            });

* {
            list-style-type:none;
            }
            .l0{
            color: #000;
            font-weight: bold;
            }
            .entry1,
            .l1{
            color: #ff3333;
            }
            .entry2,
            .l2{
            color: #003DFF;
            }
            .entry3,
            .l3{
            color: #FF8A0E
            }
            .entry4,
            .l4{
            color: #45F300;
            }
            .entry5,
            .l5{
            color: #E700EF;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <div class="treeX-container">
              <ul>
                <form>
                  <li>
                    <input type="checkbox"/>
                      <span class="l0">ALL</span>
                        <ul>
                          <li>
                            <input type="checkbox" id="checkbox1" value="1" checked />
                           <label class="l1">Entry1</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox2" value="1" checked />
                            <label class="l2">Entry2</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox3" value="1" checked />
                            <label class="l3">Entry3</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox4" value="1" />
                            <label class="l4">Entry4</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox5" value="1" />
                            <label class="l5">Entry5</label>
                          </li>
                       </ul>
                   </li>
                </form>
              </ul>
            </div>
            <div class="container">
            <div class="entry1">ENTRY1</div>
            <div class="entry2">ENTRY2</div>
            <div class="entry3">ENTRY3</div>
            <div class="entry4">ENTRY4</div>
            <div class="entry5">ENTRY5</div>
            </div>

Answer 1

这里有一个稍微简化的方法。 showHideEntries() 是一个实用函数，它在所有复选框上运行循环并设置下面关联条目的可见性。它最初在 jQuery onload 例程中调用，随后在单击复选框时调用。

$cb 是一个 jQuery 对象，它引用所有“正常”（单个）复选框。

$(function() {
  const $cb = $(".treeX-container")
    .on("click", "input", function() {
      if (!this.id)
        $cb.prop("checked", this.checked);
      showHideEntries();
    }).find("ul ul input");

  function showHideEntries() {
    $cb.each(function() {
      $("." + this.id.replace("checkbox", "entry")).toggle(this.checked)
    })
  }
  showHideEntries();
});

* {
  list-style-type: none;
}

.l0 {
  color: #000;
  font-weight: bold;
}

.entry1,
.l1 {
  color: #ff3333;
}

.entry2,
.l2 {
  color: #003DFF;
}

.entry3,
.l3 {
  color: #FF8A0E
}

.entry4,
.l4 {
  color: #45F300;
}

.entry5,
.l5 {
  color: #E700EF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="treeX-container">
  <ul>
    <form>
      <li>
        <label class="l0"><input type="checkbox"/>
                      ALL</label>
        <ul>
          <li>
            <input type="checkbox" id="checkbox1" value="1" checked />
            <label class="l1" for="checkbox1">Entry1</label>
          </li>
          <li>
            <input type="checkbox" id="checkbox2" value="1" checked />
            <label class="l2" for="checkbox2">Entry2</label>
          </li>
          <li>
            <input type="checkbox" id="checkbox3" value="1" checked />
            <label class="l3" for="checkbox3">Entry3</label>
          </li>
          <li>
            <input type="checkbox" id="checkbox4" value="1" />
            <label class="l4" for="checkbox4">Entry4</label>
          </li>
          <li>
            <input type="checkbox" id="checkbox5" value="1" />
            <label class="l5" for="checkbox5">Entry5</label>
          </li>
        </ul>
      </li>
    </form>
  </ul>
</div>
<div class="container">
  <div class="entry1">ENTRY1</div>
  <div class="entry2">ENTRY2</div>
  <div class="entry3">ENTRY3</div>
  <div class="entry4">ENTRY4</div>
  <div class="entry5">ENTRY5</div>
</div>

这是扩展问题的另一个答案，如您在下面的评论中所张贴的（基于您的 JSfiddle 的 V2）：

$(function() {
  $(".treeX-container")
    .on("click", "input", function() {
      var $cb;
      if (!this.id){       // a group checkbox was clicked
        $cb=$("ul:first input",this.closest("li")); // get all subordinate checkboxes
        $cb.prop("checked",this.checked);           // and set them accordingly
      } else $cb=$(this);  // an individual checkbox option was clicked
      showHideEntries($cb);// update visibility of associated entry elements 
    });
  function showHideEntries($cb) {
    $cb.each(function() {
     if (this.id) $("." + this.id.replace("checkbox", "entry")).toggle(this.checked) 
    });
  }
  showHideEntries($("input"));
});

* {
  list-style-type: none;
  font-size: 14px;
}

.l0 {
  color: #000;
  font-weight: bold;
}

.container {}

.item {
  background-color: #999999;
  width: 20px;
  height: 20px;
  padding: 10px;
  line-height: 20px;
  display: inline-block;
  border-radius: 20px;
  text-align: center;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="treeX-container">
  <ul>
    <form>
      <li>
        <label class="l0"><input type="checkbox" />
        ALL</label>
        <ul>
          <li>
            <label><input type="checkbox" id="checkbox1" value="1" checked />
            Entry1</label>
          </li>
          <li>
            <label><input type="checkbox" id="checkbox2" value="1" checked />
            Entry2</label>
          </li>
          <li>
            <label><input type="checkbox" id="checkbox3" value="1" checked />
            Entry3</label>
          </li>
          <li>
            <label class="l0"><input type="checkbox" />
            CheckboxGroup</label>
            <ul>
              <li>
                <label><input type="checkbox" id="checkbox4" value="1" checked />
                Entry4</label>
              </li>
              <li>
                <label><input type="checkbox" id="checkbox5" value="1" checked />
                Entry5</label>
              </li>
              <li>
                <label><input type="checkbox" id="checkbox6" value="1" checked />
                Entry6</label>
              </li>
              <li>
                <label><input type="checkbox" id="checkbox7" value="1" />
                Entry7</label>
              </li>
              <li>
                <label class="l0"><input type="checkbox" />
                CheckboxGroup</label>
                <ul>
                  <li>
                    <label><input type="checkbox" id="checkbox8" value="1" checked />
                    Entry8</label>
                  </li>
                  <li>
                    <label><input type="checkbox" id="checkbox9" value="1" checked />
                    Entry9</label>
                  </li>
                  <li>
                    <label><input type="checkbox" id="checkbox10" value="1" checked />
                    Entry10</label>
                  </li>
                  <li>
                    <label><input type="checkbox" id="checkbox11" value="1" />
                    Entry11</label>
                  </li>
                  <li>
                    <label><input type="checkbox" id="checkbox12" value="1" />
                    Entry12</label>
                  </li>
                </ul>
              </li>
              <li>
                <label><input type="checkbox" id="checkbox13" value="1" />
                Entry13</label>
              </li>
            </ul>
          </li>
          <li>
            <label><input type="checkbox" id="checkbox14" value="1" />
            Entry14</label>
          </li>
          <li>
            <label><input type="checkbox" id="checkbox15" value="1" />
            Entry15</label>
          </li>
        </ul>
      </li>
    </form>
  </ul>
</div>
<div class="container">
  <div class="item entry1">1</div>
  <div class="item entry2">2</div>
  <div class="item entry3">3</div>
  <div class="item entry4">4</div>
  <div class="item entry5">5</div>
  <div class="item entry6">6</div>
  <div class="item entry7">7</div>
  <div class="item entry8">8</div>
  <div class="item entry9">9</div>
  <div class="item entry10">10</div>
  <div class="item entry11">11</div>
  <div class="item entry12">12</div>
  <div class="item entry13">13</div>
  <div class="item entry14">14</div>
  <div class="item entry15">15</div>
</div>

我不得不稍微重新安排逻辑以处理它需要收集的不同复选框集。中心部分现在是表达式 $cb=$("ul:first input",this.closest("li"));，它收集“下一个 ul”的所有复选框，以防单击“集合”复选框之一。 this.closest("li")（Vanilla-JS 表达式!!!!）向上移动到最近的 li 元素，从那里 jQuery 选择器 "ul:first input" 将找到所有输入元素在它遇到的第一个 ul 元素下方。

我还更改了您的 label，使它们始终包围相关的复选框。这样您就可以单击标签文本来激活标签内的复选框。

为什么我的输入的初始状态被忽略了？

Why is the initial state of my inputs ignored?

checkbox

jquery