如何从表格单元格中获取复选框的值并以表单形式提交

Question

我的问题是如何获得表格单元格元素并将其附加为表单。

function submitTable(url) {
form = document.createElement('form');
form.method = 'POST';
form.action = url;
/*
HOW TO FIND ALL SELECTED CHECKBOX HERE
*/

document.body.appendChild(form);
form.submit();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table">
<thead>
<tr>
<th scope="col">COL1</th>
<th scope="col">COL2</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1">
<div>
<input class="form-check-input" type="checkbox" name="checkbox1[]" value="something">
</div>
<div>
<input class="form-check-input" type="checkbox" name="checkbox2[]" value="something">
</div>
</td>
<td id="2">
<div>
<input class="form-check-input" type="checkbox" name="checkbox1[]" value="something">
</div>
<div>
<input class="form-check-input" type="checkbox" name="checkbox2[]" value="something">
</div>
</td>
</tr>
<tr>
<td id="3">
<div>
<input class="form-check-input" type="checkbox" name="checkbox1[]" value="something">
</div>
<div>
<input class="form-check-input" type="checkbox" name="checkbox2[]" value="something">
</div>
</td>
<td id="4">
<div>
<input class="form-check-input" type="checkbox" name="checkbox1[]" value="something">
</div>
<div>
<input class="form-check-input" type="checkbox" name="checkbox2[]" value="something">
</div>
</td>
</tr>
</tbody>
</table>
<button id="MYFORM" class="btn btn-primary">Submit</button>

如何在单击时查找特定单元格和在单元格上单击并选中复选框，单击按钮时，读取所有单元格，并将复选框值作为数组，提交为表单

我希望当我单击单元格而不是单个复选框时，当单击单元格时使用jquery检查两个复选框。然后，在选择完单元格后，点击id="MYFORM"按钮，我想找到所有选中的复选框，并将其作为生成的表单提交。

Answer 1

要附加所有选中的复选框，只需使用指定适当的集合作为查询选择器：

function submitTable(url)
{
let form = document.createElement('form');
form.setAttribute('action', url);
$("#my-table>tbody input[type=checkbox]:checked").clone().appendTo(form);
document.body.appendChild(form);
form.submit();
}

请注意，您当前的命名无法区分。生成指定显式索引的名称，如name="checkbox1[1]"。

您可以通过选择表格行的所有复选框

$('#my-table>tbody>tr').click(function(ev)
{
if(ev.target.tagName !== 'INPUT')
$(this).find('>td input[type=checkbox]').prop('checked', true);
})