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

时间:2019-02-07 07:51:50

标签: jquery html

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

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"上单击“我要查找所有选中的复选框”并将其作为生成的表单提交。

1 个答案:

答案 0 :(得分: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);
  })