如何获取不同复选框的值并计算这些复选框的价值

嗨,我刚刚开始自学脚本,我有一个快速的问题,如果有人能帮助我.我已经查看了最近的帖子,找不到任何类似的帖子.
要获取不同复选框的值并计算选中的复选框的值并显示在输入字段中.它的缺省值超过1,它不起作用,有人能帮忙吗?以下是我的代码

选择 | 换行 | 行号
  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>
# 回答1


问题1,复选框不会更改其值,只会更改其选中状态,因此
变化
是错误的事件类型.
PS.如何仅选中复选框:

选择 | 换行 | 行号
  1. $('input[type="checkbox"]:checked')

标签: Javascript

添加新评论