使用jquery从隐藏的输入值中减去复选框值

时间:2012-06-09 03:36:28

标签: jquery checkbox

我一直在尝试添加和删除隐藏的表单,并根据已选中和未选中的框的值更新屏幕文本。我已经能够成功地添加所有选中的复选框值并使用.each更新隐藏的输入字段。但是,我有一段时间从总数中减去值。

我似乎无法避免的问题是减去第一个复选框的值而不是我实际取消选中的框。我尝试通过id引用该框,但这似乎没有帮助。

$(document).on("click", ".activities .checkbox-select", function(event){

    //event.preventDefault();
    $(this).parent().addClass("selected");

    //Checks the checkbox
    $(this).parent().find(":checkbox").prop('checked', true);

    var total = parseFloat($("#basePoints").val());
    $(':checkbox:checked.activity').each(function() {

        var activtyValues = 0;
        activtyValues = parseFloat(this.value);

        total += activtyValues;

        //Update the screen value
        $("#calulatedpoint").text(total);

        //Update the hidden value
        $("#calulatedPointsHidden").val(total);
    });     
});

$(document).on("click", ".activities .checkbox-deselect", function(event){

    //Get the checkbox id
    var id = $(this).attr('id');

    //event.preventDefault();
    $(this).parent().removeClass("selected");

    var total = $("#calulatedPointsHidden").val();
    checkedValue = $("input[@id="+id+"]:checked").val();  //It's finding the first checked checkbox value and subtracting that



    total -= checkedValue;

    //Update the screen value
    $("#calulatedpoint").text(total);

    //Update the hidden value
    $("#calulatedPointsHidden").val(total);

    //Unchecks the checkbox
    $(this).parent().find(":checkbox").removeAttr("checked");
});

任何帮助搞清楚我的减法问题将不胜感激。关于改进我的添加部分的提示也很棒。感谢。

2 个答案:

答案 0 :(得分:0)

缺陷在这里我相信

checkedValue = $("input[@id="+id+"]:checked").val();

不再检查此复选框,但是您在jquery选择器中指定了check,似乎它不会返回任何值,因为您还包含id?

@符号不再用于属性选择,也许你使用旧版本的jquery?

var checkedValue = $("input[id=" + id + "]").val();
console.log(checkedValue);

编辑: 添加可能的备用版本,使用1次点击事件处理程序

$(document).on("click", ".activities", function(event) {
    // add up all the checked items
    // set/reset the hidden field

    if ($(this).is(":checked")) {
        // update UI for checked item
    } else {
        // update UI for unchecked item
    }
});

答案 1 :(得分:0)

我最终通过模仿我如何添加复选框值来解决我的问题。因为函数现在几乎相同,所以我将努力使用一个函数来处理检查和取消选中。下面是最后减去我从运行总计中取消选中的复选框的值。

$(document).on("click", ".activities .checkbox-deselect", function(event){

    //event.preventDefault();
    $(this).parent().removeClass("selected");

    //Unchecks the checkbox
    $(this).parent().find(":checkbox").removeAttr("checked");

    var total = parseFloat($("#basePoints").val());
    $(':checkbox:checked.activity').each(function() {

        var activtyValues = 0;
        activtyValues = parseFloat(this.value);

        total += activtyValues;

    });

    //Update the screen value
    $("#calulatedpoint").text(total);

    //Update the hidden value
    $("#calulatedPointsHidden").val(total);
});