Adding checkbox with multiple value

Question

I have a set of books in checkboxes which a user can select. Every time a book is checked the price adds up. I also need to add its corresponding weight. I've modified this very useful example but to no avail.

<label class="checkbox" for="Checkbox1">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
    <input value="50" bweight=".4"  type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
    <input value="30" bweight=".2" type="checkbox" class="sum" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
    <input value="20" bweight=".6"  type="checkbox" class="sum" data-toggle="checkbox"> LinkedIn
</label>

<div class="card-charge-info">
    <span id="payment-total">0</span>
</div>

var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');
    totwgt = document.getElementById('payment-w');

for (var i = 0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        var add = this.wgt * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
        totwgt.innerHTML = parseFloat(total1.innerHTML) + add
    }
}

Heres the code https://jsfiddle.net/u8bsjegk/2/

score 1 · Answer 1 · answered May 16 '16 at 08:28

There's several issues in your code. Firstly you define the add variable in two places, one for the value the other for weight so your calculation is broken from there. Also note that bweight is not a valid attribute on the input element. To add your own meta data you should use a data-* attribute instead.

Try this:

var inputs = document.getElementsByClassName('sum'),
    totalValue = document.getElementById('payment-total'),
    totalWeight = document.getElementById('payment-w');


for (var i = 0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var value = parseFloat(this.value);
        var weight = parseFloat(this.dataset.weight);

        totalValue.innerHTML = parseFloat(totalValue.innerHTML) + value
        totalWeight.innerHTML = parseFloat(totalWeight.innerHTML) + weight
    }
}

As you've tagged this question with jQuery, here's a working implementation for that

var $inputs = $('.sum'),
    $totalValue = $('#payment-total'),
    $totalWeight = $('#payment-w');

$inputs.change(function() {
    var value = parseFloat(this.value);
    var weight = parseFloat($(this).data('weight'));

    $totalValue.text(function(i, text) {
        return parseFloat(text) + value;
    });
    $totalWeight.text(function(i, text) {
        return parseFloat(text) + weight;
    });
})

Working example

An explanation of the downvote would be helpful. Did I miss something, or is there an error in my examples? — Rory McCrossan, May 16 '16 at 08:33
Downvoting muppets! Does that `dataset` thing work? I had a look at it but couldn't get it to work so looked it up and it said there was some issues with IE (although I tried it in chrome), but that was a while ago and so it may now work in modern browsers — Pete, May 16 '16 at 09:40
You're right, `dataset` won't work in IE10 and lower. You'd have to use `getAttribute('data-weight')` for older browsers. — Rory McCrossan, May 16 '16 at 09:51
Is there a way to add a "check/uncheck all" button which will also automatically compute the price and weight? Or should I ask this as another topic? — iceman, May 24 '16 at 03:47
There is indeed, and it's already been asked: http://stackoverflow.com/questions/18537609/jquery-checkbox-check-all — Rory McCrossan, May 24 '16 at 07:28

jcubic · Answer 2 · 2016-05-16T08:32:38.833

0

You have few issues:

You redeclare add variable
you have typo in total1 it should be totwgt
you don't have element with payment-w id
instead of this.wgt you should use this.getAttribute('bweight')

https://jsfiddle.net/u8bsjegk/6/

edited May 16 '16 at 08:32

answered May 16 '16 at 08:20

jcubic

61,973
54
229
402

Adding checkbox with multiple value

2 Answers2