Afternoon...

I've created a small script to show the value of a selected college course. That value will populate in a field on the end-user's side.

Take a look at this jsfiddle - http://jsfiddle.net/jlnewnam/d82sf/1/

When you check the box, the value displays in a comma delimited field. What I'm trying to do is actually take those values and add them up behind the scenes, but then spitting out a number in the output field.

So, if the two courses are selected, instead of it showing "3, 3"... I want it to show "6". This is where I'm stuck. Here's the HTML/ JS...

HTML...

Code:
<div class="CourseSelection"><span>Total Credits Transferred: </span></div>

<div class="CourseSelect_Container">
<ul>
<li>
    <a href="#"><div style="onclick="" title="ASP100">
<div class=CheckMark></div>
<input type="checkbox" name="course[]" value="3" class="cbx"/></div>ASP100</a>
</li>
</ul>

<ul>
<li>
    <a href="#"><div style="onclick="" title="COM105">
    <div class=CheckMark></div>
<input type="checkbox" name="course[]" value="3" class="cbx"/></div>COM105</a>
</li>
</ul>
</div>
And the JavaScript...

Code:
$(document).ready(function() {
    var el = $('.CourseSelection span');
    var text = el.text();
    $('.CourseSelect_Container').on('click', 'li a', function() {
        var courses = [];
        $.each($('.CourseSelect_Container').find(':checked'), function(i, el) {
           courses.push(el.value);
        });
        el.text(text + ' ' + courses.join(', '));
    });
});
Any thoughts on this?

Jared