试图将几个复选框的值相乘，但它 returns 是一个字符串

Question

尝试乘以复选框的数值，但它以字符串形式返回。我的例子在 JSFiddle https://jsfiddle.net/shiataz12/mjnqth3L/1/

选项代表一个 POST 值，它将根据该数字乘以里程和其他选项的值。

我已经尝试运行检查准备好运行一个函数的文档，但它并没有完全起作用，我将函数分成两个跨度，并返回了一个字符串。

JSfiddle 中提供的代码 link 以便于参考。

  $(document).ready(function(){
$('input[name="checkbox1"]').click(function(){
    $('input[name="checkbox2"]').prop('checked', false);
});
    $('input[name="checkbox2"]').click(function(){
    $('input[name="checkbox1"]').prop('checked', false);
});
    $('input[name="checkbox1"]').checked(function(){
    displayVals1();
    });

 });
var $cbs4 = $("#qr3");
function displayVals1() {
  Calculate1();
        Calculate2();
        var singleValues1 = $("#qr1").val();
        $cbs4.each(function() {
    if (this.checked)
        singleValues1 = parseInt(singleValues1) + parseInt(this.value);

    });
  $("#pricef1").text(singleValues1);
 }
var $cbs5 = $("#qr3");
function displayVals2() {
  Calculate3();
        Calculate4();
        var singleValues2 = $("#qr2").val();
        $cbs4.each(function() {
    if (this.checked)
        singleValues2 = parseInt(singleValues2) + parseInt(this.value);

    });
  $("#pricef1").text(singleValues2);
  }
 var $cbs = $("#qr3");
 function Calculate1() {
    var kms1 = $("#qr1").val();
var total = $("#mySelect").val();
$cbs.each(function() {
    if (this.checked)
        total = parseInt(total) * parseInt(this.value);
                kms1 =  parseInt(total) * parseInt(kms1);
                    });
$("#usertotal").text('R ' + total + kms1 +'/day');
}
var $cbs1 = $("#qr3");
function Calculate2() {
            var total1 = $("#qr1").val();
$cbs1.each(function() {
    if (this.checked)
        total1 = parseInt(total1) + parseInt(this.value);

    });
  $("#userdaily").text('R ' + total1 +'/day');
  }
  var $cbs2 = $("#qr3");
  function Calculate3() {
    var kms2 = $("#qr2").val();
  var total2 = $("#mySelect").val();
  $cbs2.each(function() {
    if (this.checked)
        total2 = parseInt(total2) * parseInt(this.value);
                kms2 =  parseInt(total2) * parseInt(kms2);

    });

  $("#usertotal").text('R ' + total2 + kms2 +'/day');
 }
 var $cbs3 = $("#qr3");
 function Calculate4() {
            var total3 = $("#qr2").val();
 $cbs3.each(function() {
    if (this.checked)
        total3 = parseInt(total3) + parseInt(this.value);

    });
$("#userdaily").text('R ' + total3 +'/day');
}
$("#qr1").change(displayVals1);
displayVals1();
$("#qr2").change(displayVals2);
displayVals2();
//For  checkboxes
// WHEN CHECKBOX CLICKED OR CHECKED - RUN CALCUSAGE //
$cbs.click(Calculate1);
$cbs1.click(Calclate2);

Answer 1

这样试试。

您正在同一行中进行连接和加法运算。这就是问题所在。

$(document).ready(function(){
    $('input[name="checkbox1"]').click(function(){
        $('input[name="checkbox2"]').prop('checked', false);
        var n = $( "input[name='checkbox1']:checked" ).length;
        if(n){
          displayVals1();
        }
    });
  $('input[name="checkbox2"]').click(function(){
        $('input[name="checkbox1"]').prop('checked', false);
    });
    displayVals1();
  
});
var $cbs4 = $("#qr3");
function displayVals1() {
      Calculate1();
   Calculate2();
   var singleValues1 = $("#qr1").val();
   $cbs4.each(function() {
        if (this.checked)
            singleValues1 = parseInt(singleValues1) + parseInt(this.value);
        
  });
      $("#pricef1").text(singleValues1);
}
var $cbs5 = $("#qr3");
function displayVals2() {
      Calculate3();
   Calculate4();
   var singleValues2 = $("#qr2").val();
   $cbs4.each(function() {
        if (this.checked)
            singleValues2 = parseInt(singleValues2) + parseInt(this.value);
        
  });
      $("#pricef1").text(singleValues2);
}
var $cbs = $("#qr3");
function Calculate1() {
  var kms1 = $("#qr1").val();
    var total = $("#mySelect").val();
    var fullTot = 0;
    $cbs.each(function() {
        if (this.checked)
            total = parseInt(total) * parseInt(this.value);
        kms1 =  parseInt(total) * parseInt(kms1);
            
      });
     fullTot = parseInt(total) + parseInt(kms1);
    $("#usertotal").text('R ' + fullTot +'/day');
}
var $cbs1 = $("#qr3");
function Calculate2() {
    var total1 = $("#qr1").val();
    $cbs1.each(function() {
        if (this.checked)
            total1 = parseInt(total1) + parseInt(this.value);
       
  });
    $("#userdaily").text('R ' + total1 +'/day');
}
var $cbs2 = $("#qr3");
function Calculate3() {
  var kms2 = $("#qr2").val();
    var total2 = $("#mySelect").val();
    var fullTot2 = 0
    $cbs2.each(function() {
        if (this.checked)
            total2 = parseInt(total2) * parseInt(this.value);
        kms2 =  parseInt(total2) * parseInt(kms2);

  });
  fullTot2 = parseInt(total2) + parseInt(kms2);
    $("#usertotal").text('R ' + fullTot2 +'/day');
}
var $cbs3 = $("#qr3");
function Calculate4() {
    var total3 = $("#qr2").val();
    $cbs3.each(function() {
        if (this.checked)
            total3 = parseInt(total3) + parseInt(this.value);
       
  });
    $("#userdaily").text('R ' + total3 +'/day');
}
$("#qr1").change(displayVals1);
    displayVals1();
$("#qr2").change(displayVals2);
    displayVals2();
//For  checkboxes
// WHEN CHECKBOX CLICKED OR CHECKED - RUN CALCUSAGE //
$cbs.click(Calculate1);
$cbs1.click(Calculate2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mySelect">No. Days</label>
<select name="mySelect" id="mySelect">
<option name="one" value="1">1</option>
<option name="two" value="2">2</option>
<option name="three" value="3">3</option>
<option name="four" value="4">4</option>
<option name="five" value="5" selected>5</option>
</select><br><br>
<label for="checkbox1">100kms</label>
<input type="checkbox" name="checkbox1" value="125" id="qr1" checked><br><br>
<label for="checkbox2">200kms</label>
<input type="checkbox" name="checkbox2" value="225" id="qr2"><br><br>
<label for="checkbox3">tyre</label>
<input type="checkbox" name="checkbox3" value="20" id="qr3"><br><br>
<label for="checkbox4">glass</label>
<input type="checkbox" name="checkbox4" value="20" id="qr3"><br><br>
Daily :<span id="userdaily"> </span><br><br>
Total :<span id="usertotal"> </span>

Answer 2

罪魁祸首是这一行：

$("#usertotal").text('R ' + total + kms1 +'/day');

此处您要连接一个字符串。先算一算

var sum = total + kms1;

然后将此值添加到您的字符串中：

$("#usertotal").text('R ' + sum +'/day');**

试图将几个复选框的值相乘，但它 returns 是一个字符串

Trying to multiply the values of several checkbox's but it returns a string

math

checkbox

jquery

multiplication