SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,045
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using javascript and checkbox to add

    Hi Guys,

    I am looking for a javascript function that adds together a total based on how many checkboxes are checked.

    For example, here are some checkboxes:

    HTML Code:
    <input type="checkbox" name="jobad[]" value="{$values[i].id}" checked>
    <input type="checkbox" name="jobad[]" value="{$values[i].id}" checked>
    <input type="checkbox" name="jobad[]" value="{$values[i].id}" checked>
    <input type="checkbox" name="jobad[]" value="{$values[i].id}">
    Each checkbox will be worth 29.99, so the total as shown above would be 89.97. So basically when each checkbox is checked it should add 29.99 to the total and if it is unchecked it should subtract 29.99 from the total.

    Any ideas on how to do this?

  2. #2
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    
    function calculate() {
    var el, i = 0;
    var total = 0;
    var number = 29.99;
    while(el = document.getElementsByName("chk")[i++]) {
    if(el.checked) { total= total + number;}
    }
    alert(total);
    }
    </script>
    
    <input type="checkbox" name="chk" onclick="calculate()">
    <input type="checkbox" name="chk" onclick="calculate()">
    <input type="checkbox" name="chk" onclick="calculate()">
    <input type="checkbox" name="chk" onclick="calculate()">
    Code:
      
    <script type="text/javascript">
    
    function calculate() {
    var el, i = 0;
    var total = 0;
    while(el = document.getElementsByName("chk")[i++]) {
    if(el.checked) { total= total + Number(el.value);}
    }
    alert(total);
    }
    </script>
    
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    Last edited by muazzez; May 2, 2007 at 08:02.

  3. #3
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,045
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it possible to display the total on the page instead of via a alert box?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess you need to implement change listener to the checkboxes also. So when user click on any checkboxes, you update the number of checked items.

  6. #6
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    
    function calculate() {
    var el, i = 0;
    var total = 0;
    var number = 29.99;
    while(el = document.getElementsByName("chk")[i++]) {
    if(el.checked) { total= total + number;}
    }
    // alert(total);
    var div = document.getElementById('divid');
    div.innerHTML = "Total : " +total ;
    }
    </script>
    
    <input type="checkbox" name="chk" onclick="calculate()">
    <input type="checkbox" name="chk" onclick="calculate()">
    <input type="checkbox" name="chk" onclick="calculate()">
    <input type="checkbox" name="chk" onclick="calculate()">
    <div id="divid" style="color:red;"></div>
    Code:
    <script type="text/javascript">
    
    function calculate() {
    var el, i = 0;
    var total = 0;
    while(el = document.getElementsByName("chk")[i++]) {
    if(el.checked) { total= total + Number(el.value);}
    }
    //alert(total);
    var div = document.getElementById('divid');
    div.innerHTML = "Total : " +total ;
    }
    </script>
    
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    <input type="checkbox" name="chk" value="29.99" onclick="calculate()">
    <div id="divid" style="color:red;"></div>
    Last edited by muazzez; May 3, 2007 at 04:46.


Bookmarks

Posting Permissions

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