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

Question

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

我已经知道在选中父项时检查所有子项复选框了吗？但是我无法同时保存它们的值。

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

这个返回空数组，没有任何内容被保存。有可能那样做吗？

Answer 1

对于 Pure JavaScript，方法如下:

1. 使用 querySelector 以检索主复选框并添加一个点击监听器，该监听器运行一个函数，比如 toggleCheck()。
2. 使用 querySelectorAll 检索所有子复选框并将它们分配给变量，比如 children。
3. 然后您可以使用 forEach() 方法在单击主复选框时切换 children 变量内的每个复选框。
4. 最后，向该函数添加一个 if 语句，如果它被选中，它将把任何子复选框值推送到您的数组并返回它。

---

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

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>