使用Jquery来操作表单的复选框

时间:2012-07-17 02:27:18

标签: javascript jquery checkbox

我正在尝试做一个对我来说很奇怪的表格。

基本概念是我的表单中有一列产品复选框,如果您选择该产品,则需要选中相关产品复选框。

在表格中,我还有另外两列是产品的价格和尺寸。我想计算价格和尺寸的数量取决于正在勾选的产品。到目前为止我只能获得正在检查的产品的价值,而不是价格和尺寸的价值。另外,如何动态地进行计算。

这是html,http://jsfiddle.net/DDEzm/2/

希望有人可以提供帮助,非常感谢。

2 个答案:

答案 0 :(得分:0)

要获得该值,您需要做的就是:

$(function(){
    $("[name='chkProduct']").live('change',function(){
        var totalCost = 0;
        $("[name='chkProduct']").each(function(i){
            if($(this).attr("checked")) {
                var price = $(this).parent().next().find("[name='price']").val();
                var size= $(this).parent().next().next().find("[name='size']").val();
                totalCost = totalCost + (price * size);
                $("#presult").val(totalCost);
            }
        });
    });
});​

但您可能希望添加检查以确保它是您尝试添加的数字,可以通过限制输入,也可以在单击复选框时进行检查。例如,您可以使用javascripts parseInt

此外,您可以使用名称或类来标识复选框。这样您就不必为每个复选框编写更改函数。

修改

我对其进行了修改,以便它可以与所有复选框一起使用并计算总数。

答案 1 :(得分:0)

试试这个,这个解决方案基于你的标记:

$(function(){
    $('#cb1').live('change',function(){
        if ($(this).is(':checked')) {
           var val = 0;
           val = parseInt($('#tb1').val(), 10) + parseInt($('#tb2').val(), 10)
           $('#presult').val(val)             
        } else {
           $('#presult').val('0')              
        }
    });
});

DEMO