CODEWITHSUNDEEP
javascriptcss
KoldTurkee
KoldTurkee

Reputation: 957

Adding values of multiple checkboxes together; displaying a sum at the end...

I am trying to create a spry accordion menu with a checkbox in each panel. This panel directly relates to a number of college credits. When that checkbox is clicked, along with how many other clicked checkboxes, a sum should display at the end of the page for the label - Total Number of Transfer Credits.

Here's the site I have so far (live): http://webfro.gs/south/toc/

On this jsfiddle, you can see what I'm ultimately trying to do... http://jsfiddle.net/jlnewnam/dC8T2/

Here's the HTML:

<div id="course_id">
    <input type="checkbox" value="3" />&nbsp; ASP100<br/>
    <input type="checkbox" value="4" />&nbsp; COM104<br/>
    <input type="checkbox" value="1" />&nbsp; ECO202<br/>
    <input type="checkbox" value="3" />&nbsp; MAT111<br/>
</div>
<br />
<br />
Total Potential Transfer Credits: <div id='total_potential'></div>

Here's the JavaScript: 

jQuery(document).ready(function($) {
    var sum = 0;
    $('#course_id :checkbox').click(function() {
        sum = 0;
        $('#course_id :checkbox:checked').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $('#total_potential').html(sum);

    });

});

You'll notice that as you click each checkbox, the sum of the total number of credits increases.

I can't seem to pull this off in the spry menu. I guess it's because each panel has it's own ID, and I can't figure out the separation I need to accomplish the goal.

Regards,

KT

Upvotes: 0

Views: 4012

Answers (2)

Karol
Karol

Reputation: 8053

Your code should be:

jQuery(document).ready(function($) {
    $('#CourseMenu input[type=checkbox]').change(function() {
        var sum = 0;
        $('#CourseMenu input[type=checkbox]:checked').each(function(idx, elm) {
            if( $(elm).val() && !isNaN( parseInt( $(elm).val() ) ) ) {
                sum += parseInt( $(elm).val() );
            }
        });
        $('#total_potential').html(sum);
    });
}(jQuery));

First of all you have chosen bad selector for checkbox. Secondly I prefer using change event. It should work with click as well, but logically I think change is proper in this case. Also I have added different way of reading the value (since your already have jQuery included).

I checked it by pasting into JS console of your website (not jsfiddle), so it's tested, and works.

Code working with jsfiddle:

jQuery(document).ready(function($) {
    $('#course_id input[type=checkbox]').change(function() {
        var sum = 0;
        $('#course_id input[type=checkbox]:checked').each(function(idx, elm) {
            if( $(elm).val() && !isNaN( parseInt( $(elm).val() ) ) ) {
                sum += parseInt( $(elm).val() );
            }
        });
        $('#total_potential').html(sum);
    });
}(jQuery));

Also I have no idea how this can work: $('#CourseMenu :checkbox') as id of container on your website and in jsfiddle is different. You don't have #CourseMenu element in your jsfiddle...

You can simply check it by pasting this lines in jsfiddle:

alert('Proper fiddle selector: ' + $('#course_id input[type=checkbox]').length);
alert('Wrong fiddle selector: ' + $('#CourseMenu :checkbox').length);

As you will see second selector doesn't return you any checkbox...

Upvotes: 1

Ian Wood
Ian Wood

Reputation: 6573

Nice easy one....

This should work with your markup.

$(function($) {
    var sum = 0;
    $('#CourseMenu :checkbox').click(function() {
        sum = 0;
        $('#CourseMenu :checkbox:checked').each(function(idx, elm) {
            sum += parseInt(elm.value, 10);
        });

        $('#total_potential').html(sum);
    });
});

You just needed the right slectors

Upvotes: 2

Related Questions