Question

I’ve been attempting to add and subtract from a hidden form filed and update screen text based on the values of the checked and unchecked boxes. I’ve been able to successfully add up all the checked checkbox values and update the hidden input field using .each. However, I’m having a heck of a time subtracting values from the total.

The issue I can’t seem to avoid is subtracting the value of the first checked box instead of the box I’m actually unchecking. I tried to reference the box by id but that didn’t seem to help.

$(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");
});

Any help figuring out my subtraction issue would be appreciated. Tips on improving my addition section would be great too. Thanks.

Answer 1

the defect is here I believe

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

this checkbox is no longer checked, but you are specifying checked in the jquery selector, seems like it would not return any value since you also include id?

also the @ sign is no longer used for attribute selecting, maybe you are using older version of jquery?

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

EDIT: adding possible alternate version, use 1 click event handler

$(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
    }
});