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

Automatically checking / unchecking parent inputs

本文关键字：检查 输入 取消      更新时间：2023-09-26

我希望有人能帮我。

我正在尝试自动选中输入列表中的父项，但如果未选中父项，也会取消选中子项。

最棒的是，我发现了一些可以完美复制所需功能的代码：http://jsfiddle.net/3y3Pb/14/

编辑：为了澄清-所需的功能是：勾选标记一个子输入&将检查所有父项。取消选中父项-将取消选中所有子项输入。请参阅上面的示例。

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

我已经把范围缩小到我认为的问题所在。ACF用CCD_ 1封装每个输入。我不知道为什么，但这破坏了功能：

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

当我移除<label></label>时，它工作正常：

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

更改标记在这里并不是一个真正的选择，如果有人能帮助我完成这项工作，我将不胜感激！

这应该可以工作，它很简单，只使用div和几行jquery:

$('[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'));
});
div {
    margin-left: 25px;
}
div div {
    margin-left: 25px;
}
<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>

我改进了javascript代码。

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

Children在DOM树中向下移动一个级别，而find向下移动多个级别以查看后代。

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

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

})；

相关文章：