How to dynamically add values linked to a checkbox or in the input tag using jQuery

Question

I have been at this for quite some time. I am trying to create a form the does dynamic calculations using jQuery.

I want to check the prop('checked') for the checkboxes in the input tags. I don't think this is a problem, but for the form I am working on they have the checkboxes positioned off the screen since they are swapping out active and inactive images. I should still be able to to check the prop('checked') in that input tag even though the checkbox is off screen, correct? If so, this does not work for some reason.

So I have been working on a work around. I created an .on('click', function() {}); that grabs the sibling element which would be the input tag and it's value. This works. kind of. The value doesn't show in the #total-field until after the checkbox is unclicked. My thinking is because the click function is firing at the same time as when I am grabbing the var giantSub = $('#giant-sub-label'); so the if(giantSub.hasClass('checked'); doesn't see the class checked until I uncheck the box which in turn puts my value in the #total-field afterwards. Is this correct?

If so, is there a way to check for the class checked after the checkbox is clicked before it is stored in the variable? So that the variable has the .checked I am looking for the pass my if condition which then would add the values in the #total field? Or is there an easier way to do this?

Here's my anonymous function:

$(function () {
    $('#giant-sub-label').on('click', function () {
        var giantSub = $('#giant-sub-label');
        var total = 0;
        if (giantSub.hasClass('checked')) {
            total += parseInt($(this).next().val());
        }
        $('#total-field').val('$' + total);
    });
});

HTML

<div class="checkbox-format">
  <label for="three-feet-field" id="giant-sub-label">3-feet</label>
  <input type="checkbox" name="GIANT_THREE_FEET" id="three-feet-field" class="order-options" value="42" />
</div>

Amitesh · Accepted Answer · 2014-11-20 05:46:14Z

The behaviour which you are getting is because of Synthetic Click Activation.
When a label is associated with some control(checkbox in this case), clicking the label will fire click event and since there is a controll associated, user agent will thereafter run synthetic click activation on the checkbox.
Therefore you are getting the pre-click state of checkbox in your label click handler.
However you can get the post-click checkbox state by attaching handler to checkbox instead of label. These events will be fired indirectly with label click (even if your checkbox is hidden) after modifying the checkbox state.

 $(checkBoxSelector).on('click or change', function () {...do something

Thanks, man! This is an old question and I don't remember what I did, but I figured it out somehow.

Collectives™ on Stack Overflow

How to dynamically add values linked to a checkbox or in the input tag using jQuery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related