对指定区域的内容自动加checkbox的

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<form action="" method="get" class="contact-form">
<table id="example" border="1" cellspacing="0">
<tbody>
<tr><td colspan="2" class="nocut">标题 标题 标题 标题 标题 标题 标题 标题 标题 标题</td></tr>
<tr><td>英文1</td><td class="nocut">English English</td></tr>
<tr><td>编剧</td><td class="cut">张三 李四</td></tr>
<tr><td>片名</td><td class="nocut">片名随便 写写就行</td></tr>
<tr><td>英文2</td><td class="nocut">English English</td></tr>
<tr><td>类别</td><td class="cut">悬疑 爱情 枪战</td></tr>
<tr><td>演员</td><td class="cut">张某某 李某某 王某某 周某某</td></tr>
<tr><td>发行时间<td>2022年12月31日</td></tr>
</tbody>
</table>
<input type="submit" value="Submit" />
</form>
<script>
   var tds=$('#example td.cut').html(function (index, el) {
        return this.innerText.split(' ').map(i => `<label><input type="checkbox"  value="${i}"/>${i}</label>`).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>

以上代码是对指定区域的内容自动加checkbox的,其对class="cut"的td是正确的,但对class="nocut"的td无效。

我希望对于class="nocut"的td也可以对其内容做整体的checkbox,而不需要按空格去做checkbox,这种情况怎么办呢?

由于两种td是混杂在一起的,所以,要确保提交后获取的数据也是正确的。

给需要处理成checkbox的td单元格添加checkbox样式,如果要拆分的同时添加cut样式

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<form action="" method="get" class="contact-form">
    <table id="example" border="1" cellspacing="0">
        <tbody>
            <tr><td colspan="2" class="checkbox">标题 标题 标题 标题 标题 标题 标题 标题 标题 标题</td></tr>
            <tr><td>英文1</td><td class="checkbox">English English</td></tr>
            <tr><td>编剧</td><td class="checkbox cut">张三 李四</td></tr>
            <tr><td>片名</td><td class="checkbox">片名随便 写写就行</td></tr>
            <tr><td>英文2</td><td class="checkbox">English English</td></tr>
            <tr><td>类别</td><td class="checkbox cut">悬疑 爱情 枪战</td></tr>
            <tr><td>演员</td><td class="checkbox cut">张某某 李某某 王某某 周某某</td></tr>
            <tr><td>发行时间<td class="checkbox">2022年12月31日</td></tr>
        </tbody>
    </table>
    <input type="submit" value="Submit" />
</form>
<script>
    var tds = $('#example td.checkbox').html(function (index, el) {
        //不拆分,直接生成带name的checkbox
        if (!this.classList.contains('cut')) return `<label><input type="checkbox" name="name${index}"  value="${this.innerText}"/>${this.innerText}</label>`;

        //需要拆分
        return this.innerText.split(' ').map(i => `<label><input type="checkbox"  value="${i}"/>${i}</label>`).join(' ')
            //隐藏控件存储值,checkbox不需要name,隐藏控件的名称依次为name0~name4,依次对应编剧,片名,类别,演员,发行时间
            + `<input type="hidden" name="name${index}"/>`
    });
   //注册提交事件,设置hidden控件值为勾选的checkbox
    $('.contact-form').submit(function () {
       //选出cut拆分的td,获取勾选的checkbox设置隐藏控件值
       tds.filter('.cut').each(function () {
           $(':hidden', this).val($(':checkbox:checked', this).map(function () { return this.value }).get().join(' '));
       })
   })
</script>

望采纳!!点击该回答右侧的“采纳”按钮即可采纳!!
您可以尝试把如下代码改为:

var tds = $('#example td').html(function (index, el) {
  if ($(this).hasClass('cut')) {
    return this.innerText.split(' ').map(i => `<label><input type="checkbox"  value="<span class="hljs-subst">${i}"/>${i}</label>`).join(' ')
      //隐藏控件存储值,checkbox不需要name,隐藏控件的名称依次为name0~name4,依次对应编剧,片名,类别,演员,发行时间
      + `<input type="hidden" name="name<span class="hljs-subst">${index}"/>`
  } else {
    return `<label><input type="checkbox" value="${this.innerText}"/>${this.innerText}</label>`
      + `<input type="hidden" name="name<span class="hljs-subst">${index}"/>`
  }
});
这样就可以为 class="nocut" 的 td 添加整体的 checkbox,而不是按空格去做 checkbox 了。

解决了么 添加checkbox的问题