如何从复选框组（最好使用 jQuery）收集数组数据并将这些数据分配给隐藏的目标元素的值？

Posted 2023-05-09

【中文标题】如何从复选框组（最好使用 jQuery）收集数组数据并将这些数据分配给隐藏的目标元素的值？

【英文标题】：How does one, from a checkbox group and preferably with jQuery, collect array data and does assign this data to a hidden target element's value?

【发布时间】：2021-04-01 03:18:35

【问题描述】：

我有一组同名的复选框...

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

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

【问题讨论】：

一个或所有复选框？

您希望如何编写<input type="hidden" class="target" name="target[]" value=""> 的value 属性？如"1,2,3" 或"1 2 3"，甚至"[1,2,3]"，或..？

@dm_tr ...我想/猜想OP希望以某种方式将所有选中复选框的组合结果写入目标输入价值。

@PeterSeliger 我想将"[1,2,3]" 作为数组插入到 target[] 输入。

@user2726957 ...如果没有未解决的问题，您可以考虑对答案进行投票并接受最有帮助的答案。

【参考方案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="">

【讨论】：

我喜欢它，因为它始终如一地使用 jQuery 的工具链；我什至不知道（感觉就像几个世纪以前）jQuery 的 get()。

【参考方案2】：

执行以下操作的基本 jQuery 方法...

查询所有同名...[name="checkbox[]"] ...以及:checked复选框， 并将生成的 jQuery 集合转换为本机数组...toArray()。 利用数组的原生 map 方法返回一个包含（选中的）复选框值的数组， 之后立即通过JSON.stringify 转换为它的字符串表示（数组文字表示法）， 并分配给隐藏目标元素的（通过 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="">