How to check specific checkboxes with javascript/jquery?

Question

I have four variables which begin on page load like this (NOTE: all together add up to 100)...

a=60;
b=20;
c=10;
d=10;

I have three checkboxes like this..

  <label for="b">B</label>
  <input type="checkbox" id="b"  name="b" value="" checked="checked" >
  <label for="c">C</label>
  <input type="checkbox" id="c"  name="c" value="" checked="checked" >
  <label for="d">D</label>
  <input type="checkbox" id="d"  name="d" value="" checked="checked" >

As you can see, all three checkboxes are checked by default. I want to change the variables from above based on checking/unchecking any of these three boxes. Essentially, unchecking a checkbox is turning OFF that variable and making it's value 0. In other words:

var b will be either 20 (when it's checkbox is checked) or 0 if it's unchecked

var c will be either 10 (when it's checkbox is checked) or 0 if it's unchecked

var d will be either 10 (when it's checkbox is checked) or 0 if it's unchecked

And when any of those are unchecked, I want to add their value to var a because I want all 4 variables to always add up to 100

So for example, if all three checkboxes remain checked, var a remains 60. If checkbox B is unchecked and C/D remain checked, var a becomes 80 (original 60 plus 20 from "turned off" var b)

My thought was to do something like this...

$(function() {
    $("input[type='checkbox']").change(function() {
        if(document.getElementById('b').checked) {
            var a = a-20; 
            var b = 20;
        } else {
            var a = a+20;
            var b = 0;
        }
       //and do this for all three checkboxes
    })
})

But then I realize that if I look at EACH box every time ANY of them are changed, then I would unnecessarily subtract values from var a for 2 of them, since they are checked by default.

Regardless, I'm sure having a block of code for each block is probably an inefficient way to handle this. Anybody have any direction for me on possibly condensing the code, specifically only adding/subtracting value when specific checkboxes are CHANGED (since simply seeing if they are checked would cause issues since they are all checked by default)

For example in the code above, if checkbox D was unchecked and triggered the function, it would look at checkbox B and see that it's checked and subtract 20 from a, but it shouldn't because B hasn't changed at all yet.

Sorry for rambling, hope this makes some sense to somebody.

Lajos Arpad · Accepted Answer · 2016-04-12 15:35:18Z

1

First, let's simplify things by encapsulating the whole band into an object, like this:

var composite: {
    a: 60,
    b: 20,
    c: 10,
    d: 10
};

It is clear that you want to keep the sum 100, but it is not clear how you want to keep that sum. Which variable(s) will get the value and how. For now, I will assume that a will hold all the surplus. Anyway, you need to have the original values for the case when the user (that little bastard) re-checks one of the checkboxes, so, let's clone it and store the clone:

var oldComposite = JSON.parse(JSON.stringify(composite));

and then have a check and an uncheck function, like this:

function check(code) {
    composite.a += combosite[code];
}

function uncheck(code) {
    composite.a -= (composite[code] = oldComposite[code]);
}

answered Apr 12, 2016 at 15:35

Lajos Arpad

80.5k42 gold badges124 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sonny Prince · Accepted Answer · 2016-04-12 15:28:52Z

You can do this by simply looping through all of the checkboxes on change of any that have the class of .calc (this can be anything - i just used this for my example) and have a value stored in a data attribute or something similar, then checking if the current checkbox within the loop has been checked and if so adding it to a total amount.

On change the total gets reset and the calculation is run again.

Here's the HTML:

<input type="checkbox" data-val="20" class="calc" />
<input type="checkbox" data-val="10" class="calc" />
<input type="checkbox" data-val="40" class="calc" />
<input type="checkbox" data-val="30" class="calc" />

The JS:

$('.calc').on('change', function() {
  var total = 0;
  $('.calc').each(function() {
    if ($(this).is(':checked')) {
      total = (total + parseInt($(this).attr('data-val')));
    }
  });
  console.log(total);
});

and a working codepen:

http://codepen.io/sonnyprince/pen/aNqxdz

Collectives™ on Stack Overflow

How to check specific checkboxes with javascript/jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related