父复选框输入在其子输入被选中时被选中。 iCheck 插件答案

【问题标题】：Parent checkbox inputs are checked when thei children inputs becomes checked. iCheck Plugin父复选框输入在其子输入被选中时被选中。 iCheck 插件
【发布时间】：2015-04-01 14:39:57
【问题描述】：

我正在使用iCheck Plugin 在我的网站上设置我的复选框的样式。

我有多个父类别，然后是我的网站用户可以从中选择的子类别（子类别）。我的目标是默认情况下让所有父类别处于禁用状态，然后如果它们的任何子类别被选中，则让它们被选中（但对用户单击保持禁用状态）。为了更清楚起见：如果检查了父类别的任何子类别，则始终需要检查父类别，我不能依赖我的用户来执行此操作，这就是我希望将其自动化的原因。

这是简化的 HTML 布局...

<li class="categories">

    //Parent that is disabled and needs to get into a disabled-checked state
    <label class="selectit icheck-label">
        <div class="icheckbox_polaris icheck-item">
            <input type="checkbox" name="field_1" value="79" class="icheck-input title-input">
        </div>
    Parent 1
    </label>

  //ul that holds all children categories
  <ul class="children">
      <li>
      <label class="selectit icheck-label">
          <div class="icheckbox_polaris icheck-item">
              <input type="checkbox" name="fields_2" value="97" class="icheck-input">
          </div> 
       Child 1
      </label>
      </li>

      <li>
      <label class="selectit icheck-label">
          <div class="icheckbox_polaris icheck-item">
              <input type="checkbox" name="fields_2" value="97" class="icheck-input">
          </div> 
       Child 2
      </label>
      </li>
  </ul>

</li>

这是我目前使用 jQuery 代码的地方...

第 1 步

jQuery('.categories').find('input:first').addClass('title-input');

这会找到第一个<input>，它是每个类别列表的父输入，并将.title-input 类添加到其中。

第 2 步

jQuery('.title-input').icheck('disabled');

这会在父输入上找到新添加的.title-input 类并将其置于禁用状态（用户无法单击）。这行得通。

第 3 步（此处需要帮助）

jQuery('.children input').on('ifChecked', function(event) {

    console.log("Hello!"); //this log works

    jQuery('.title-input').icheck('checked');

});

所以我的问题是，当单击任何类别中的任何子输入时，所有的父输入都会被检查。当子输入未被选中时，父母不会再次被选中（他们应该）。我只是在学习 jQuery，到目前为止，这已经超出了我的范围。如果您访问我上面链接的页面，iCheck 插件有多种帮助可以帮助您完成此操作，但我就是想不通。

另外，如果您想知道我为什么不使用简写 jQuery，那是因为我在 Wordpress 上这样做。

非常感谢您。

【问题讨论】：

标签： jquery html

【解决方案1】：

jQuery('.children input').on('ifChecked', function(event) {
    jQuery(this).closest('.categories').find('.title-input').icheck('checked');
});

jQuery('.children input').on('ifUnchecked', function(event) {
    var category = jQuery(this).closest('.categories');
    if (category.find(".children input:checked").length === 0) {
        category.find('.title-input').icheck('unchecked');
    }
});

更新：确保在您的表单提交中包含父复选框：

jQuery('#idOfYourForm').on('submit', function() {
    jQuery('.title-input').icheck('enable');
    return true; // needed to allow form submission to happen
});

【讨论】：

嘿，phari，这很棒，而且很有效。我真的希望处于 Checked & Disabled 状态的复选框的值仍会将值发布为已检查，因为icheck allows a simultaneous checked and disabled state，但事实并非如此。因此，我最终将父复选框设置为display: none;，并在使用您的 jQuery 代码时保持启用状态。如果我错过了为什么该值未在 Checked & Disabled 状态下注册，请告诉我。如果它甚至不起作用，他们甚至提供它，感觉很奇怪。谢谢你的帮助。
顺便说一句，赏金将在 16 小时左右发放，因为 Stackoverflow 会设置一个计时器。
禁用的输入在提交包含表单时不包括在内，这是规范。您可以通过向重新启用父复选框的表单添加 onsubmit 处理程序来解决此问题。
在复选框上添加重新启用不起作用，因为我不希望用户能够自己单击它。我想防止用户错误，同时仍向用户显示他们的孩子选择属于哪个父母。 display: none; 没有那么花哨，但它必须这样做。仍然觉得奇怪的是 icheck 插件包含一个灰色和选中标记的按钮，但不允许它传递选中的值......有点误导。
如果您在 onsubmit 期间重新启用父复选框，用户将没有机会点击它们，因为将加载一个新页面。或者，如果您通过 AJAX 提交，onsubmit 应该启用、发送，然后重新禁用。（关于未提交的禁用输入，这是 HTML 表单的定义行为，并非特定于 iCheck。）

【解决方案2】：

也许是……

jQuery(this).closest(".children").prev().find(".title_input").icheck("checked");

也就是说，当您的输入被检查时（这个），找到它包含.children 容器 - 然后从那里找到前一个兄弟（<label>）并在其中找到.title-input 元素和“检查”它。

【讨论】：

啊，我没有注意到包含 .categories - @phari 的回答做同样的事情，但更干净！

【解决方案3】：

jQuery('.title-input') 获取所有具有“title-input”类的对象，而不仅仅是单击的子项的父项。

在'.on('ifChecked', ...) 块中使用的this 将是被点击的元素；尝试使用它来检索该孩子的父母。

【讨论】：

【解决方案4】：

jQuery('.title-input') 获取所有父类别，这就是它检查所有父类别的原因。相反，使用与事件关联的复选框并通过遍历树来获取最近的父类别。它看起来像这样。

jQuery('.children input').on('ifChecked', function(event) {
    console.log("Hello!"); //this log works
    jQuery(this).closest('.categories').find('.title-input').icheck('checked');
});

【讨论】：