Question

我希望有人可以帮助我。

我尝试自动检查输入列表中的父项，但如果取消选中父项，则取消选中子项。

最棒的是我找到了一些能够完美复制所需功能的代码：http://jsfiddle.net/3y3Pb/14/

编辑：澄清 - 所需的功能是：勾选儿童输入＆amp;检查所有父项。取消选中父级 - 所有子输入都将取消选中。见上面的例子。

然而，这似乎并不适用于我的特定代码（它是从WordPress插件输出的 - 高级自定义字段）所以我不想修改它。

我已将其缩小到我认为的问题。 ACF用<label></label>包装每个输入。我不知道为什么，但这打破了功能：

http://jsfiddle.net/3y3Pb/223/

当我删除<label></label>时，它可以正常工作：

http://jsfiddle.net/3y3Pb/225/

更改标记在这里真的不是一个选项，如果有人能协助我完成这项工作，我真的很感激！

Answer 1

这应该有用，它很简单，只使用div和几行jquery：

＆＃13;

$('[type="checkbox"]').change(function () {
    var kids = $(this).next().next();
    if (kids.is('div') && !$(this).prop('checked'))
    {
        kids.children().each(function(){$(this).prop('checked',false)});
    }
    var thisChecked = $(this).prop('checked');
    var master = $(this).parent().prevAll('[type="checkbox"]:first');
    master.prop('checked', thisChecked ? true : master.prop('checked'));
});

＆＃13;

div {
    margin-left: 25px;
}
div div {
    margin-left: 25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />Master Check
<br />
<div>
    <input type="checkbox" />Slave Check 1
    <br />
    <input type="checkbox" />Slave Check 2
    <br />
    <input type="checkbox" />Slave Check 3
    <br />
    <div>
        <input type="checkbox" />Slave 2 Check 1
        <br />
        <input type="checkbox" />Slave 2 Check 2
        <br />
        <input type="checkbox" />Slave 2 Check 3</div>
</div>

＆＃13;

Answer 2

我改进了javascript代码。

＆＃13;

$(document).ready(function() {
  $('input[type=checkbox]').click(function(){

    // if is checked
    if($(this).is(':checked')){
      $(this).parents('ul').children('li').children('label').find('input').prop('checked', true);

    } else {
      // uncheck all children
      $(this).closest('li').find('input').prop('checked', false);

    }

  });
});

＆＃13;

Children沿着DOM树向下移动一个级别，而find向下查找后代的多个级别。

Answer 3

这是标签 - 这是解决方案：

$('input[type=checkbox]').click(function(){
// if is checked
if($(this).is(':checked')){
    $(this).parents('li').children('label').find('input[type=checkbox]').prop('checked', true);
} else {
    // uncheck all children
    $(this).closest('li').find('input[type=checkbox]').prop('checked', false);
}

}）;

自动检查/取消选中父输入

3 个答案: