www.webdeveloper.com
Results 1 to 2 of 2

Thread: while click on checkboxes price should add using javascript or jquery

  1. #1
    Join Date
    Feb 2013
    Posts
    1

    while click on checkboxes price should add using javascript or jquery

    Hello everyone,

    I created one form in that i created some checkboxes like price1,price2,price3.

    And one Textbox for displaying value using javascript (or) Jquery (or) Ajax

    Now my problem is if i checked price1, the price1 value should display in Texbox.

    And if i checked two Checkboxes(price1,price2) the both values should add and display in textbox.

    Can anyone help me out.

    Thanks
    sumanth

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Something like this?
    See: http://www.javascriptsource.com/form...heckboxes.html

    Here's an updated version of the code...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Checkbox Summation </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <div id="costEntry">
    <input type="checkbox" value="9.99" >Game 1 ( 9.99)<br>
    <input type="checkbox" value="19.99">Game 2 (19.99)<br>
    <input type="checkbox" value="27.50">Game 3 (27.50)<br>
    <input type="checkbox" value="45.65">Game 4 (45.65)<br>
    <input type="checkbox" value="87.20">Game 5 (87.20)
    </div>
    <input type="text" id="totalcost" value="">
    
    
    <script type="text/javascript">
    /* This script and many more are available free online at
    The JavaScript Source!! http://www.javascriptsource.com
    Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */
    // Modified on: 2/22/2013
    
    function UpdateCost() {
      var sum = 0;
      var sel = document.getElementById('costEntry').getElementsByTagName('input');
      for (i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { sum += Number(sel[i].value); }
      } document.getElementById('totalcost').value = sum.toFixed(2);
    } 
    
    window.onload = function() {
      var sel = document.getElementById('costEntry').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        sel[i].onclick = function () { UpdateCost(); }
      }
    }
    </script>
    
    </body>
    </html>
    Last edited by JMRKER; 02-22-2013 at 09:35 AM.

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