Adding/removing value on checkbox checked/unchecked using jquery

Question

i am trying to make a list of options for a user to select to get a price quote, example being:

banana check
apple check
biscuit unchecked
jam check

Each option has a value banana $3, apple $2, biscuit $11, jam $1.

Total of example above $4 + $2 + $1.20 = $7.20 (biscuit is not wanted)

I want the total to update as the check boxes are ticked/unticked. The values don't seem to be adding and my code seem to lengthy if i were to add more options.

My Code http://codepen.io/Perk/pen/azpzWK

As you can probably tell i am very new to JavaScript/jQuery.

Html:

<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" />
<label for="checkbox1" class="css-label">banana</label><br>

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
<label for="checkbox2" class="css-label">apple</label><br>


<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
<label for="checkbox3" class="css-label">biscuit</label><br>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
<label for="checkbox4" class="css-label">jam </label><br>

<p>Total Cost: $<span id="total"></span></p>

Script:

$total = "";


 // Banana $4

$('#checkbox1').click(function(){
    if (this.checked) {
        $total =+ 4;
        $('#total').html( $total );
    } 
}) 

// Apple $2

$('#checkbox2').click(function(){
    if (this.checked) {
      $total =+ 2;
      $('#total').html( $total );
    }    
}) 

// Biscuit $11

$('#checkbox3').click(function(){
    if (this.checked) {
        $total =+ 11;
        $('#total').html( $total );
    } 
}) 

// Jam $1

$('#checkbox4').click(function(){
    if (this.checked) {
      $total =+ 1;
      $('#total').html( $total );
    }    
})

use $total = 0; and += not =+

Satpal
– Satpal

2015-01-07 11:33:41 +00:00
Commented Jan 7, 2015 at 11:33 — Satpal
– Satpal, Commented Jan 7, 2015 at 11:33

James Donnelly · Accepted Answer · 2015-01-07 11:34:59Z

They're not adding because you're using $total =+ n instead of $total += n. You're setting the $total value to the value specified each time. $total =+ 11 would set $total to +11 (which evaluates to the number 11).

To fix it, simply change =+ to +=:

if (this.checked) {
    $total += 11;
    $('#total').html( $total );
}

A much tidier solution

A better solution would be to add each value as the checkbox value within your markup. For example:

<input type="checkbox" ... value="11" />

Then use just one change event to handle all cases:

$('input:checkbox').on('change', function() {
    if (this.checked)
        $total += +this.value;
    else
        $total -= +this.value;

    $('#total').html($total);
});

Demo

var $total = 0;

$('input:checkbox').on('change', function() {
    if (this.checked)
        $total += +this.value;
    else
        $total -= +this.value;

    $('#total').html($total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="4" />
<label for="checkbox1" class="css-label">banana</label><br>

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="2" />
<label for="checkbox2" class="css-label">apple</label><br>


<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="11" />
<label for="checkbox3" class="css-label">biscuit</label><br>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="1" />
<label for="checkbox4" class="css-label">jam </label><br>

<p>Total Cost: $<span id="total">0</span></p>

Thanks for you answer! Works Great, can't believe i got the += the wrong way around, it's too hot here! Thanks for fully reading the scenario and adding the -= if unchecked! Thanks again!

acid_srvnn · Accepted Answer · 2015-01-07 11:42:46Z

0

+= not =+
initialize total to 0 , not "" . cos then += will be performed as concatenations.

you have to consider uncheck operation also.

var $total = 0;
$('#checkbox1').click(function(){
if (this.checked) {
    $total += 4;
    $('#total').html( $total );
} else{
    $total -= 4;
    $('#total').html( $total );
}
})

answered Jan 7, 2015 at 11:42

acid_srvnn

7039 silver badges17 bronze badges

Comments

Waseem Bepari · Accepted Answer · 2015-01-07 11:46:28Z

use parseint The parseInt() function parses a string argument and returns an integer demo with checked and unchecked code

$total = 0;


 // Banana $4

$('#checkbox1').click(function(){
    if (this.checked) {
        $total =parseInt($total+ 4);
        $('#total').html( $total );
    }else{
      $total =parseInt($total- 4);
        $('#total').html( $total );
    } 
  
}) 

// Apple $2

$('#checkbox2').click(function(){
    if (this.checked) {
      $total =parseInt($total+ 2);
      $('#total').html( $total );
    }else{
      $total =parseInt($total- 2);
        $('#total').html( $total );
    }     


}) 
    
// Biscuit $11

$('#checkbox3').click(function(){
    if (this.checked) {
        $total =parseInt($total+ 11);
        $('#total').html( $total );
    }else{
      $total =parseInt($total- 11);
        $('#total').html( $total );
    }  
  
}) 

// Jam $1

$('#checkbox4').click(function(){
    if (this.checked) {
     $total =parseInt($total+ 1);
      $('#total').html( $total );
    }else{
      $total =parseInt($total- 1);
        $('#total').html( $total );
    }     


})

/*Check box*/

input[type=checkbox].css-checkbox {
							position:absolute; z-index:-1000; 
							left:-1000px; 
							overflow: hidden; 
							clip: rect(0 0 0 0); 
							height:1px; 
							width:1px; 
							margin:-1px; 
							padding:0; 
							border:0;

						}

						input[type=checkbox].css-checkbox + label.css-label {
							padding-left:27px;
							height:22px; 
							display:inline-block;
							line-height:22px;
							background-repeat:no-repeat;
							background-position: 0 0;
							font-size:22px;
							vertical-align:middle;
							cursor:pointer;
							margin-top: 15px;
						}

						input[type=checkbox].css-checkbox:checked + label.css-label {
							background-position: 0 -22px;
						}
						label.css-label {
				background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1470d2ed405eb6fa12570883c6b38297.png);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" />
	<label for="checkbox1" class="css-label">banana</label><br>

	<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
	<label for="checkbox2" class="css-label">apple</label><br>


	<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
	<label for="checkbox3" class="css-label">biscuit</label><br>

	<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
	<label for="checkbox4" class="css-label">jam </label><br>

<p>Total Cost: $<span id="total"></span></p>

Kushal · Accepted Answer · 2015-01-07 11:49:11Z

0

Try this optimised code:

codepen

$total = 0;
var fruit = {
  jam: 1,
  banana: 4,
  biscuit: 11,
  apple: 2
}


$('input[type="checkbox"]').click(function() {
  if (this.checked) {
    $total += fruit[$(this).data("type")] || 0;
    $('#total').html($total);
  } else {
    $total -= fruit[$(this).data("type")] || 0;
  }


})

<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" data-type="banana" />
<label for="checkbox1" class="css-label">banana</label>
<br>

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" data-type="apple" />
<label for="checkbox2" class="css-label">apple</label>
<br>


<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" data-type="biscuit" />
<label for="checkbox3" class="css-label">biscuit</label>
<br>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" data-type="jam" />
<label for="checkbox4" class="css-label">jam</label>
<br>

<p>Total Cost: $<span id="total"></span>
</p>

It should work for your needs

edited Jan 7, 2015 at 11:49

answered Jan 7, 2015 at 11:40

Kushal

1,3706 silver badges16 bronze badges

3 Comments

James Donnelly Over a year ago

This isn't CodeReview. The question is why is this not working, not optimise my code for me. If you want to post a code optimisation, at least answer the question asked first.

Kushal Over a year ago

@JamesDonnelly thanks for pointing it out. As the answer to that was already given by other people so i added and optimised code. I hope it shouldn't hurt anybody

SHEKHAR SHETE Over a year ago

incorrect!uncheck is not handled! I mean on uncheck the previous amount is not returned

Rory McCrossan · Accepted Answer · 2015-01-07 11:54:00Z

0

You can DRY up your logic by adding a value attribute to the HTML:

<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="4" />
<label for="checkbox1" class="css-label">banana</label>
<br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="2" />
<label for="checkbox2" class="css-label">apple</label>
<br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="11" />
<label for="checkbox3" class="css-label">biscuit</label>
<br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="1" />
<label for="checkbox4" class="css-label">jam</label>
<br>
<p>Total Cost: $<span id="total">0</span></p>

Then in Javascript you can use the same click handler for each checkbox. This sums the value of every checkbox on each click to ensure that no values are missed out.

$('.css-checkbox').click(function() {
    var values = $('.css-checkbox:checked').map(function() {
        return parseInt(this.value, 10);
    }).get();
    $('#total').html(values.reduce(function(p, c) { return p + c; }, 0));
});

Example fiddle

edited Jan 7, 2015 at 11:54

answered Jan 7, 2015 at 11:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

SHEKHAR SHETE Over a year ago

uncheck is not handled! I mean on uncheck the previous amount is not returned

Collectives™ on Stack Overflow

Adding/removing value on checkbox checked/unchecked using jquery

5 Answers 5

A much tidier solution

Demo

1 Comment

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

A much tidier solution

Demo

1 Comment

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related