Calculate total on checkbox checked

Question

HTML

<div id="catlist">
    <input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
    <input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
    <input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
    <input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
    <input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
    <input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
    <input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
    <input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
    <input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0"  />

Javascript

function calcAndShowTotal(){
    var total = 0;
    $('#catlist :checkbox[checked]').each(function(){
        total =+ parseFloat($(this).attr('price')) || 0;
    });
    $('#total').val(total);
}

$('#pricelist :checkbox').click(function(){
    calcAndShowTotal();
});

calcAndShowTotal();

I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..

where is #pricelist ?

Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy

2016-07-18 04:51:53 +00:00
Commented Jul 18, 2016 at 4:51 — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Jul 18, 2016 at 4:51
Instead of =+ it should be +=

Kartikeya Khosla
– Kartikeya Khosla

2016-07-18 04:53:54 +00:00
Commented Jul 18, 2016 at 4:53 — Kartikeya Khosla
– Kartikeya Khosla, Commented Jul 18, 2016 at 4:53

Rayon · Accepted Answer · 2016-07-18 05:13:53Z

Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()

function calcAndShowTotal() {
  var total = 0;
  $('#catlist :checkbox:checked').each(function() {
    total += parseFloat($(this).attr('price')) || 0;
  });
  $('#total').val(total);
}

$('#catlist :checkbox').change(calcAndShowTotal).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
  <input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
  <label for="cat_1">cat_1</label>
  <br/>
  <input type="checkbox" id="cat_2" value="cat_2" price="2" />
  <label for="cat_2">cat_2</label>
  <br/>
  <input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
  <label for="cat_3">cat_3</label>
  <br/>
  <input type="checkbox" id="cat_4" value="cat_4" price="4" />
  <label for="cat_4">cat_4</label>
  <br/>
  <input type="checkbox" id="cat_5" value="cat_5" price="5" />
  <label for="cat_5">cat_5</label>
  <br/>
  <input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
  <label for="cat_6">cat_6</label>
  <br/>
  <input type="checkbox" id="cat_7" value="cat_7" price="7" />
  <label for="cat_7">cat_7</label>
  <br/>
  <input type="checkbox" id="cat_8" value="cat_8" price="8" />
  <label for="cat_8">cat_8</label>
  <br/>
  <input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
  <label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />

Using Array#reduce

function calcAndShowTotal() {
  var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
    return a + +$(b).attr('price') || 0;
  }, 0);
  $('#total').val(total);
}

$('#catlist :checkbox').change(calcAndShowTotal).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
  <input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
  <label for="cat_1">cat_1</label>
  <br/>
  <input type="checkbox" id="cat_2" value="cat_2" price="2" />
  <label for="cat_2">cat_2</label>
  <br/>
  <input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
  <label for="cat_3">cat_3</label>
  <br/>
  <input type="checkbox" id="cat_4" value="cat_4" price="4" />
  <label for="cat_4">cat_4</label>
  <br/>
  <input type="checkbox" id="cat_5" value="cat_5" price="5" />
  <label for="cat_5">cat_5</label>
  <br/>
  <input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
  <label for="cat_6">cat_6</label>
  <br/>
  <input type="checkbox" id="cat_7" value="cat_7" price="7" />
  <label for="cat_7">cat_7</label>
  <br/>
  <input type="checkbox" id="cat_8" value="cat_8" price="8" />
  <label for="cat_8">cat_8</label>
  <br/>
  <input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
  <label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />

brk · Accepted Answer · 2016-07-18 04:58:59Z

1

Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction

var _total = 0;
$('input[type="checkbox"]').change(function() {
  if($(this).is(':checked')){
  _total += parseFloat($(this).attr('price')) || 0;
  }
else{
  _total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})

JSFIDDLE

answered Jul 18, 2016 at 4:58

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

brk · Accepted Answer · 2016-07-18 05:32:06Z

0

$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});

edited Jul 18, 2016 at 5:32

brk

50.3k10 gold badges59 silver badges85 bronze badges

answered Jul 18, 2016 at 5:17

nshiv

11 bronze badge

1 Comment

abarisone Over a year ago

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".

Collectives™ on Stack Overflow

Calculate total on checkbox checked

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related