如何从表格单元格中获取复选框的值并作为表单提交答案

【问题标题】：How to get value of checkbox from table cell and submit as form如何从表格单元格中获取复选框的值并作为表单提交
【发布时间】：2019-02-07 07:51:50
【问题描述】：

我的问题是如何获取表格单元格元素并将其附加到表单中。

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" 我想找到所有选中的复选框并将它们作为生成的表单提交。

【问题讨论】：

请发布更多代码。 submitRowAsForm() 在哪里触发？除了“MYFORM”，我没有看到任何 ID。
@Bernhard submitRowAsForm() 是我之前代码中的函数。我想解释我的预期输出的概念。当我单击单元格而不是单个复选框时，我想要单击单元格时选中两个复选框。然后在我完成选择单元格后，我想在按钮（id="MYFORM"）上单击找到所有选中的复选框并作为表单提交。
我已经更新了我的问题
form 包裹你的桌子有问题吗？
@rt-jar 是的，表格内不能有表格

标签： jquery html

【解决方案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);
  })

【讨论】：

你的表需要一些id，这里是id="my-table"
谢谢，你回答了我的一部分问题。我如何获得 td id 并使用该 id 选中这两个复选框？
你的code变了，之前没有id。
是的，我之前在 cmets 中提到过。我更新了我的代码
这是正确的吗？ $("#mytable").find("input[type=checkbox]:checked").each().clone().appendTo(form);