checkbox表格一行传送多值

img
点击右边的选中与差,下面对应的每列的价格总和都会有相对应的变化

写一个遍历数据行的函数,判断CheckBox选中就累加,在设置页脚的统计信息,在CheckBox的change事件和删除确认后执行这个函数,有帮助麻烦点个采纳【本回答右上角】,谢谢~

img

示例代码

<table border="1" id="tb">
    <tr><td></td><td>1省</td><td>3省</td><td>6省</td><td>全国</td><td>选中</td><td>删除</td></tr>
    <tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
    <tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
    <tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
    <tr><td></td><td>¥1000</td><td>¥2000</td><td>¥3000</td><td>¥4000</td><td><input type="checkbox" /></td><td><a>X</a></td></tr>
    <!--统计对应td加id-->
    <tr><td>统计</td><td id="s1"></td><td id="s2"></td><td id="s3"></td><td id="s4"></td><td></td><td></td></tr>
</table>

<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    function summary() {
        var s1 = 0, s2 = 0, s3 = 0, s4 = 0, v, re = /\d+(\.\d+)?/;
        $('#tb').find(':checkbox:checked')//这里选择器同样,如果存在其他非选中的CheckBox,要增加特殊class进行区分
            .each(function () {
                var td = $(this).parent().prev();//全国td
                v = re.exec(td.text());
                s4 += parseFloat(v) || 0;
                td = td.prev();//6省
                v = re.exec(td.text());
                s3 += parseFloat(v) || 0;
                td = td.prev();//3省
                v = re.exec(td.text());
                s2 += parseFloat(v) || 0;
                td = td.prev();//1省
                v = re.exec(td.text());
                s1 += parseFloat(v) || 0;
            });

        $('#s4').text(s4);
        $('#s3').text(s3);
        $('#s2').text(s2);
        $('#s1').text(s1);
    }
    $('#tb').on('click', ':checkbox,a', function () {
        if (this.tagName == 'A') {//如果表格存在其他非删除的a对象,最好给删除按钮加一个样式,通过this.className=='del'来判断
            if (!confirm('确认删除?!')) return false;
            $(this).closest('tr').remove();
        }
        summary();
    });
</script>

可以实现,将四个价格的以属性的方式添加到多选框,当点击多选框时,获取这四个属性值相加求和

点击删除后要重新从后台重新数据,并且刷新界面。

checkbox change事件传整个表格的数据