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

使用纯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>

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

Answer 3

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

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

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

选中所有子复选框，选中它们并保存其值

4 个答案: