iou3344 2023-01-01 12:22 采纳率: 85.2%
浏览 47
已结题

对指定区域的内容自动加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是混杂在一起的,所以,要确保提交后获取的数据也是正确的。

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-01-04 11:24
    关注

    给需要处理成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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月12日
  • 已采纳回答 1月4日
  • 修改了问题 1月4日
  • 赞助了问题酬金15元 1月3日
  • 展开全部

悬赏问题

  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题