By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,984 Members | 1,092 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,984 IT Pros & Developers. It's quick & easy.

How to get value of different checkboxes and calculate value of those checked checkbo

P: 1
Hi, I just starting learning javascript by myself and have quick question if anyone can help. I already checked recent post and couldn't find any similar one.
To get value of different check boxes and calculate value of those checked check boxes and show in the input field .It is working for default values more than one it doesn't work can anyone help? here id my code
Expand|Select|Wrap|Line Numbers
  1. <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript">
  2.     $(document).ready(function () {
  3.         var sumOfVals = 0;
  4.         $('#posscanner').click(function () {
  5.             $("#txtposscanner").toggle();
  6.         });
  7.         $('#surveillancecam').click(function () {
  8.             $("#txtsurveillancecam").toggle();
  9.         });
  10.         $('#lotteryscanner').click(function () {
  11.             $("#txtlotteryscanner").toggle();
  12.         });
  13.         $('#invoincescanner').click(function () {
  14.             $("#txtinvoincescanner").toggle();
  15.         });
  16.         $('#networkscanner').click(function () {
  17.             $("#txtnetworkscanner").toggle();
  18.         });
  19.         $('#txtposscanner').keyup(function () {
  20.             var txtscval = $("#txtposscanner").val();
  21.             var chkscval=$('#posscanner').val();
  22.             var dataps = txtscval * chkscval;
  23.          /*   $('.chskboxva:checked').each(function () {
  24.                 var data = $(this).val();
  25.                 sumOfVals = sumOfVals + parseInt($(this).val());
  26.             });
  27.             var result = (txtscval * chkscval) + sumOfVals - chkscval;*/
  28.             $("#price").val(dataps);
  29.         });
  30.         $('#txtsurveillancecam').keyup(function () {
  31.             var txtscval = $("#txtsurveillancecam").val();
  32.             var chkscval = $('#surveillancecam').val();
  33.             var datassc = txtscval * chkscval;
  34.             $("#price").val(datassc);
  35.         });
  36.         $('#txtlotteryscanner').keyup(function () {
  37.             var txtscval = $("#txtlotteryscanner").val();
  38.             var chkscval = $('#lotteryscanner').val();
  39.             var datals = txtscval * chkscval;
  40.             $("#price").val(datals);
  41.         });
  42.         $('#txtinvoincescanner').keyup(function () {
  43.             var txtscval = $("#txtinvoincescanner").val();
  44.             var chkscval = $('#invoincescanner').val();
  45.             var datais = txtscval * chkscval;
  46.             $("#price").val(datais);
  47.         });
  48.         $('#txtnetworkscanner').keyup(function () {
  49.             var txtscval = $("#txtnetworkscanner").val();
  50.             var chkscval = $('#networkscanner').val();
  51.             var datans = txtscval * chkscval;
  52.             $("#price").val(datans);
  53.         });
  54.        /* var pizza_toppings = 0;
  55.         $('input[type="checkbox"]').on('click', function (e) {
  56.             if (this.checked) {
  57.                 pizza_toppings += eval(this.value);
  58.             } else {
  59.                 pizza_toppings -= eval(this.value);
  60.             }
  61.  
  62.             $("#price").val(pizza_toppings);
  63.         });
  64.     });*/
  65.  
  66.    var $inputs = $('input[type="checkbox"]')
  67.     $inputs.on('change', function () {
  68.         var sum = 0;
  69.         $inputs.each(function() {
  70.         // iterate and add it to sum only if checked
  71.            if(this.checked)
  72.                sum += parseInt(this.value);
  73.         });
  74.         $("#price").val(sum);
  75.     });
  76. });
  77.  
  78.  
  79. </script> </head> <body><p id="pizza_toppings"> <label class="lblitems"><input type="checkbox" class="chskboxva" id="posscanner" name="POS Scanner" value="2"> POS Scanner</label> <input class="txt" id="txtposscanner" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="surveillancecam" name="Surveillance Camera" value="3"> Surveillance Camera</label> <input id="txtsurveillancecam" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="lotteryscanner" name="Lottery Scanner" value="4"> Lottery Scanner</label> <input id="txtlotteryscanner" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="invoincescanner" name="Invoice Scannerr" value="5"> Invoice Scannerr</label> <input id="txtinvoincescanner" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /><br /> <label class="lblitems"><input type="checkbox" class="chskboxva" id="networkscanner" name="Network Router" value="6"> Network Router</label> <input id="txtnetworkscanner" class="txt" style="width: 40px; display: none;" type="text" value="1" name="txt" /> </p> <p>
  80.     Calculated Price:
  81.     <input type="text" name="price" id="price" /> </p></body> </html>
Jan 23 '14 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
problem #1, checkboxes don’t change their value, only their checked state, so change is the wrong event type.

PS. how to get only the checked checkboxes:
Expand|Select|Wrap|Line Numbers
  1. $('input[type="checkbox"]:checked')
Jan 24 '14 #2

Post your reply

Sign in to post your reply or Sign up for a free account.