如何在提交按钮单击时获取所有动态选中的复选框以及文本框值？答案

【问题标题】：How can I get all the dynamic selected check box along with the text box value on submit button click?如何在提交按钮单击时获取所有动态选中的复选框以及文本框值？
【发布时间】：2021-11-13 11:37:38
【问题描述】：

有一个动态生成的复选框列表。每个复选框都有一个输入框。

如何在提交按钮单击时获取所有动态选中的复选框以及文本框值？

创建复选框

function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
   $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
}

【问题讨论】：

显示您用来创建复选框的动态方式
@AlirezaAhmadi 问题已更新
您只是添加复选框？每个复选框对应的文本框在哪里？

标签： jquery

【解决方案1】：

您可以使用input[type=checkbox]:checked 属性找到选中的复选框。

let checkedCheckboxes = document.querySelectorAll('input[type=checkbox]:checked');

checkedCheckboxes.forEach((checkbox) => {
  console.log(`checked checkbox id: ${checkbox.id}`);
  console.log(`label: ${checkbox.labels[0].textContent}`);
});

<label for="cb1">label 1</label>
<input type="checkbox" id="cb1" checked>

<label for="cb2">label 2</label>
<input type="checkbox" id="cb2">

<label for="cb3">label 3</label>
<input type="checkbox" id="cb3" checked>

【讨论】：