Question

我有这样的情况，

我有一个名为class的{{1}}有2 checkbox-group这样的

occurences

IN 相同的<div class="check-group"> <input type="checkbox" value="abc" checked="checked"/> <label>abc</label> <input type="checkbox" value="xyz"/> <label>xyz</label> </div>我还有一次出现document check-group

像这样，

class

现在我的问题是如何在每次出现<div class="check-group"> <input type="checkbox" value="pqrs" checked="checked"/> <label>pqrs</label> </div> array时对check-group提出不同的问题？像这样class

问题是我可能不知道使用array1 = ["abc"]; AND array2 = ["pqrs"] check-group时class dynamic出现的次数。

注意：请form builder array grow per发生class。

这里是演示：https://jsfiddle.net/gfux198s/27/（array没有array class根据Enhancer的出现而增长

提前致谢!!!

Answer 1

获取所有check-group元素的列表：

const groups = document.getElementsByClassName('check-group');

获取每个组中复选框值列表的列表：

const valueGroups = Array.from(groups).map((group) => {
    const checkboxes = group.querySelectorAll('input[type="checkbox"]');
    return Array.from(checkboxes).map((elem) => {
        return elem.value;
    });
});

如果要将元素动态插入到文档中（即使用event listener），那么应该在那里收集这些值，而不是像这样查询文档。

您可以使用的一个很棒的功能是getElementsByClassName()返回一个实时的元素列表。它将自动更新以响应DOM。但是，它不会为您或类似的东西重新运行这些地图功能。

对您无法控制的更改做出反应的最后手段是使用MutationObserver直接对DOM中的更改做出反应。但要注意，这个时间很贵。

Answer 2

＆＃13;

function create_checkgroup_arrays(){
  var checkgroupArray = [];  
  var i=0;
  $(".check-group").each(function(){
    checkgroupArray[i] = [];
    $(this).find("input:checkbox:checked").each(function(){
      checkgroupArray[i].push($(this).val());
    });    
    i++;
  });
  console.log(checkgroupArray);
}
$("#_click_it").on("click",function(){
  create_checkgroup_arrays()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="check-group">
  <input type="checkbox" value="abc" checked="checked"/>
  <label>abc</label>

  <input type="checkbox" value="xyz"/>
  <label>xyz</label>
</div>

<div class="check-group">
  <input type="checkbox" value="pqrs" checked="checked"/>
  <label>pqrs</label>
</div>
<input type="button" id="_click_it" value="click_it">

＆＃13;

如何将类的每个出现推送到单独的数组

2 个答案: