jquery给指定区域内的空格加多选框并提交

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<form action="" method="post" class="contact-form">
<table id="example">
<tbody>
<tr><td>编剧</td><td>张三 李四</td></tr>
<tr><td>片名</td><td>片名随便写写就行</td></tr>
<tr><td>类别</td><td>悬疑 爱情 枪战</td></tr>
<tr><td>演员</td><td>张某某 李某某 王某某 周某某</td></tr>
<tr><td>发行时间</td><td>2022年12月31日</td></tr>
</tbody>
</table>
<input type="submit" value="Submit" />
</form>

页面加载完后，就将这个id="example"的表格中的空格换成多选框（checkbox），而且每一行的checkbox的name是一样的（命名规则由您确定），而且表单提交后，可以将相同name的选项提交为一组用空格隔开的数据，比如选择了悬疑和枪战，并且这一组的name是name3，那么提交表单后，name3=悬疑枪战

也就是要形成这样的代码

<table id="example">
    <tbody>
    <tr><td>编剧</td><td><input type="checkbox" name="name1" value="张三" />张三    <input type="checkbox" name="name1" value="李四" />李四    <input type="checkbox" name="name1" value="王五" />王五
    </td></tr>
    <tr><td>片名</td><td><input type="checkbox" name="name2" value="片名随便写写就行" />片名随便写写就行</td></tr>
    <tr><td>类别</td><td><input type="checkbox" name="name3" value="悬疑" />悬疑    <input type="checkbox" name="name3" value="爱情" />爱情    <input type="checkbox" name="name3" value="枪战" />枪战</td></tr>
    <tr><td>演员</td><td><input type="checkbox" name="name4" value="张某某" />张某某    <input type="checkbox" name="name4" value="李某某" />李某某    <input type="checkbox" name="name4" value="王某某" />王某某    <input type="checkbox" name="name4" value="周某某" />周某某</td></tr>
    <tr><td>发行时间</td><td><input type="checkbox" name="name5" value="2022年12月31日" />2022年12月31日</td></tr>
    </tbody>
</table>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<form action="" method="get" class="contact-form">
    <table id="example">
        <tbody>
            <tr><td>编剧</td><td>张三 李四</td></tr>
            <tr><td>片名</td><td>片名随便写写就行</td></tr>
            <tr><td>类别</td><td>悬疑 爱情 枪战</td></tr>
            <tr><td>演员</td><td>张某某 李某某 王某某 周某某</td></tr>
            <tr><td>发行时间</td><td>2022年12月31日</td></tr>
        </tbody>
    </table>
    <input type="submit" value="Submit" />
</form>
<script>
    var tds=$('#example tr td:nth-child(2)').html(function (index, el) {
        return this.innerText.split(' ').map(i => `<input type="checkbox"  value="${i}"/>${i}`).join('　')
            //隐藏控件存储值，checkbox不需要name，隐藏控件的名称依次为name0~name4，依次对应编剧，片名，类别，演员，发行时间
            + `<input type="hidden" name="name${index}"/>`
    });
    //注册提交事件，设置hidden控件值为勾选的checkbox
    $('.contact-form').submit(function () {
        tds.each(function () {
            $(':hidden', this).val($(':checkbox:checked', this).map(function () { return this.value }).get().join(' '));
        })
    })

</script>

首先，在页面加载完后，可以使用 jQuery 的遍历方法 $(selector).each() 遍历表格中的所有单元格，然后使用 jQuery 的 replaceWith() 方法将每个单元格中的内容替换成多选框。

具体的代码如下所示：

$(document).ready(function(){
  $('#example td').each(function(){
    var cellContent = $(this).html();
    var checkbox = '<input type="checkbox" name="name3" value="' + cellContent + '">';
    $(this).html(checkbox);
  });
});

在表单提交时，可以使用 jQuery 的 serialize() 方法将表单中的数据序列化为字符串，然后使用 $.ajax() 方法将表单数据提交到服务器端。

具体的代码如下所示：

$('.contact-form').submit(function(event){
  event.preventDefault();
  var formData = $(this).serialize();
  $.ajax({
    type: 'POST',
    url: 'your-server-side-url',
    data: formData,
    success: function(response){
      // 处理服务器端的响应
    }
  });
});

望采纳。

提供实例思路【JQuery实现复选框CheckBox的全选、反选、提交操作】，链接：https://blog.csdn.net/pan_junbiao/article/details/107666302