Question

我正在使用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上这样做。

提前非常感谢你。

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

Answer 2

也许像......

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

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

Answer 3

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

this块中使用的

'.on('ifChecked', ...)将是单击的元素;尝试使用它来检索那个孩子的父母。

Answer 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');
});

在检查其子输入时，将检查父复选框输入。 iCheck插件

4 个答案: