www.webdeveloper.com
Results 1 to 12 of 12

Thread: [RESOLVED] Adding values of checked boxes together - spitting out one number at the end...

  1. #1
    Join Date
    Dec 2012
    Posts
    81

    resolved [RESOLVED] Adding values of checked boxes together - spitting out one number at the end...

    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

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654
    it's very interesting how you will add ASP100 and COM105... what is supposed to be the result of this?

  3. #3
    Join Date
    Dec 2012
    Posts
    81
    I've managed to figure out part of it. Take a look at this and you'll see what I mean -

    http://jsfiddle.net/jlnewnam/dC8T2/

    What I'm doing is adding the values of each. The value of ASP100 is value="3" and the value of COM105 is value="4", so when you run it and check both boxes, the number that populates is 7.

    Does that make sense? It does work, but I am having issues with it.

    I'm trying to have everything tucked inside a spry accordion menu. I want the user to be able to click on one of the accordion panels, then check the box. When they're done going through all of the panels, at the bottom of the page, a number will appear indicating the total number of potential transfer credits.

    The problem I can't get around is that I have to have all my input checkboxes inside one spry panel, like this...

    Code:
        <input type="checkbox" value="3" />&nbsp; ASP100<br/>
        <input type="checkbox" value="4" />&nbsp; COM105<br/>
        <input type="checkbox" value="1" />&nbsp; ECO202<br/>
        <input type="checkbox" value="3" />&nbsp; MAT111<br/>

    What I need is something like this...

    Code:
    	<div id="CourseMenu">
        	<div id="CollapsiblePanel1" class="CollapsiblePanel">
            	<div class="CollapsiblePanelTab" tabindex="0">ASP100 Skills for Success           
            </div>
            
            
            <div class="CollapsiblePanelContent">
              <p>Content goes here.</p>
    			<div id="course_id">
    	            <p>Equivalent:</p>
                    	<input type="checkbox" value="3" /> &nbsp; ASP100<br />
                    </div>
                    
            </div>
         </div>
        
          <div id="CollapsiblePanel2" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">COM104 Persuasion 
              
            </div>
            <div class="CollapsiblePanelContent">
              <p>Content here.</p>
    
    	            <p>Equivalent:</p>
                    	<input type="checkbox" value="4" /> &nbsp; COM104<br  />
    
            </div>
          </div>
    Take a look here. I put it live... http://webfro.gs/south/toc/

    I want to be able to check the box in each spry panel, and at the bottom of the page, populate the total number of transfer credits.

    Is that more clear to my goals?

  4. #4
    Join Date
    Dec 2012
    Posts
    81
    Figured out a script that will work with my markup...

    Code:
    $(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);
        });
    });

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654
    in your first code the two radios have values ASP100 and COM105 thats why i asked ))

  6. #6
    Join Date
    Dec 2012
    Posts
    81
    Padonak... Maybe you can help me with something else.

    I'm now trying to add up the total number of checkboxes checked, and then multiply that result by 5. Is that possible in the script I have above?

    Here it is again...

    Code:
    $(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);
        });
    });

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654
    $('#CourseMenu :checkbox:checked').length*5

  8. #8
    Join Date
    Dec 2012
    Posts
    81
    This result has to go on a different line. Would this line be integrated into the original script, or placed somewhere else?

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654
    Code:
    $(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);
             $('#here_goes_your_output_element_id').html($('#CourseMenu :checkbox:checked').length*5);                                      
        });
    });

  10. #10
    Join Date
    Dec 2012
    Posts
    81
    You rock Padonak!

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,654

  12. #12
    Join Date
    Dec 2012
    Posts
    81
    Lol!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles