选择所有子复选框，选中它们并保存它们的值答案

【问题标题】：Select all child checkboxes, checked them and save their value选择所有子复选框，选中它们并保存它们的值
【发布时间】：2019-01-11 20:37:35
【问题描述】：

我有带有复选框的可嵌套列表，我需要检查父复选框以检查所有子复选框并将子值保存到数组中。

当父母被选中时，我已经弄清楚了所有子复选框的检查？但我无法同时保存它们的值。

HTML

<ul>
    <li class="main-parent">                                 
        <input class="main-checkbox" type="checkbox" value="id">   
        <ul>
            <li>
                <input class="sub-checkbox" type="checkbox" value="1">
            </li>
            <li>
                <input class="sub-checkbox" type="checkbox" value="2">
            </li>
            <li>
                <input class="sub-checkbox" type="checkbox" value="3">
            </li>
         </ul>
     </li>
</ul>

JQuery

$('input:checkbox').change(function () {
    var array=[];
    if(type === "main-checkbox") {
        var parent = $(this).closest('.dd-item');

        if('$(parent).find('.sub-checkbox').is(":checked")) {
         array.push($(parent).find('.sub-checkbox').prop('checked',this.checked).val());
        }
    }
});

这个返回空数组并且没有保存任何内容。有可能以某种方式做到这一点吗？

【问题讨论】：

你可以试试我的解决方案 :: stackoverflow.com/questions/14853568/… ，这里我展示了如何选择所有子复选框

标签： javascript jquery html

【解决方案1】：

使用 Pure JavaScript，方法如下：

使用 querySelector 检索主复选框并添加一个单击侦听器，该侦听器运行一个函数，例如 toggleCheck()。
使用 querySelectorAll 检索所有子复选框并将它们分配给变量，例如 children。
然后，只要单击主复选框，您就可以使用 forEach() 方法来切换 children 变量中的每个复选框。
最后，将if statement 添加到函数中，如果选中则将任何子复选框值推送到您的数组并返回。

检查并运行以下 代码片段，以获得我上面描述的实际示例：

var main = document.querySelector(".main-checkbox");
var children = document.querySelectorAll(".sub-checkbox");

function toggleCheck() {
  var array=[];
  children.forEach(child => {
    child.checked = child.checked == true ? false : true

    if (child.checked == true) {
      array.push(child.value);
    }
  })

  console.log(array);
  return array;
}

main.addEventListener("click", toggleCheck);

<ul>
  <li class="main-parent">                                 
<input class="main-checkbox" type="checkbox" value="id">   
<ul>
  <li><input class="sub-checkbox" type="checkbox" value="1"></li>
  <li><input class="sub-checkbox" type="checkbox" value="2"></li>
  <li><input class="sub-checkbox" type="checkbox" value="3"></li>
</ul>
  </li>
</ul>

【讨论】：

如果我检查孩子然后检查父母然后孩子未被检查而父母应该检查或取消检查孩子它应该检查孩子是否被检查然后它保持检查或取消检查孩子应该保持取消选中父项。

【解决方案2】：

试试这个：

$(function () {
    $('input:checkbox.main-checkbox').click(function () {
        var array = [];
        var parent = $(this).closest('.main-parent');
        //check or uncheck sub-checkbox
        $(parent).find('.sub-checkbox').prop("checked", $(this).prop("checked"))
        //push checked sub-checkbox value to array
        $(parent).find('.sub-checkbox:checked').each(function () {
            array.push($(this).val());
        })
    });
})

【讨论】：

【解决方案3】：

此小提琴中的代码允许您通过单击main-checkbox 来检查所有.sub-checkbox-classes。所有的值都被推送到一个数组中（如果未选中则删除）。

https://jsfiddle.net/vs9pb1xu/3/

【讨论】：

【解决方案4】：

$('.main-checkbox').change(function () {

       var array=[];

        $(this).siblings().find('input').each(function(){
            $(this).trigger('click'); 
            if($('.main-checkbox').is(':checked')){
                array.push($(this).val());
            }
        });
        console.log('>>>'+array);
});

【讨论】：