如何从复选框组中收集数组数据，最好是使用 jQuery，并将此数据分配给隐藏的目标元素的值？

Question

我有一组名称相同的复选框。。。

<input type="checkbox" class="checkbox" name="checkbox[]" value="1" checked />
<input type="checkbox" class="checkbox" name="checkbox[]" value="2" checked />
<input type="checkbox" class="checkbox" name="checkbox[]" value="3" checked />

还有一个隐藏的表单元素。。。

<input type="hidden" class="target" name="target[]" value="" />

使用jQuery，我想将所有选中的复选框值以值列表的形式复制到隐藏的目标元素的值中。

我试过以下。。。

$(".checkbox").each(function(idx, val) {
$('input[name="target['+idx+']"]').val(this.value);
});

没有成功。如何生成和分配正确的结果？

Answer 1

map((:checked复选框以创建其值的数组，然后字符串化该数组

const checkedVals = $(".checkbox:checked").map((i,el) => el.value).get()
$('input[name="target[]"]').val(JSON.stringify(checkedVals))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" name="checkbox[]" value="1" checked />
<input type="checkbox" class="checkbox" name="checkbox[]" value="2" />
<input type="checkbox" class="checkbox" name="checkbox[]" value="3" checked />
<input  class="target" name="target[]" value="">

Answer 2

基本的jQuery方法，它执行以下操作。。。

1. 查询所有名称相同的。。。[name="checkbox[]"]。。。以及CCD_ 3复选框
2. 并将生成的jQuery集合转换为本地数组。。。toArray()
3. 使用数组的本机CCD_ 5方法来返回(选中的(复选框值的数组
4. 它紧接着通过CCD_ 6被转换成它的字符串表示(数组文字表示法(
5. 并被分配给隐藏目标元素的(通过jQuery$('input[name="target[]"]')[0](值。

   $('input[name="target[]"]')[0].value = JSON.stringify(
   $('[type="checkbox"][name="checkbox[]"]:checked')
   .toArray()
   .map(elm => elm.value)
   );
   console.log(
   'target[] :: value :',
   $('input[name="target[]"]')[0].value
   );

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <input type="checkbox" class="checkbox" name="checkbox[]" value="1" checked />
   <input type="checkbox" class="checkbox" name="checkbox[]" value="2" />
   <input type="checkbox" class="checkbox" name="checkbox[]" value="3" checked />
   <input type="hidden" class="target" name="target[]" value="">

上述方法的无jQuery变体，带有复选框更改事件处理。。。

function updateCheckboxTargetValue() {
document
.querySelector('input[name="target[]"]')
.value = JSON.stringify([
...document
.querySelectorAll(
'[type="checkbox"][name="checkbox[]"]:checked'
)
].map(elm => elm.value)
);
console.log(
'target[] :: value :',
document.querySelector('input[name="target[]"]').value
);
}
function handleCheckboxChange(evt) {
if (evt.target.matches('[type="checkbox"][name="checkbox[]"]')) {
updateCheckboxTargetValue();
}
}
updateCheckboxTargetValue();
document.addEventListener('change', handleCheckboxChange);

<input type="checkbox" class="checkbox" name="checkbox[]" value="1" checked />
<input type="checkbox" class="checkbox" name="checkbox[]" value="2" />
<input type="checkbox" class="checkbox" name="checkbox[]" value="3" checked />
<input type="hidden" class="target" name="target[]" value="">