将文本值与复选框值之和相乘，并将其显示在段落中

Multiplying text put value with the sum of check box values and display it on a paragraph

本文关键字：段落中 显示 文本 复选框      更新时间：2024-06-11

我正在尝试将输入的文本输入值与单击的复选框值之和相乘。到目前为止，当您单击复选框时，它们的金额将立即显示在span emlement上，id="Totalcost"。。。。我需要一些帮助来弄清楚如何将选中的复选框和在文本输入字段中输入的值相乘。

如果使用JQuery可以轻松完成，我将非常感谢

提前谢谢。

这是我的代码

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
   var total = 0;
     inputBox.onkeyup = function(){
    document.getElementById('Totalcost').innerHTML = inputBox.value;
}
    function test(item){
	var inputBox = document.getElementById('chatinput');
      if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        //alert(total);
        document.getElementById('Totalcost').innerHTML = total ;
    }
    </script>
	
  </head>
  <body>
<input type="text"  id="chatinput" onchange="myFunction()"><br>
<p id="printchatbox"></p>
    <div id="container">
    <p id="printc"></p>
    <input type="checkbox" name="channcost" value="10" onClick="test(this);"  />10<br />
    <input type="checkbox" name="chanlcost" value="20" onClick="test(this);" />20 <br />
    <input type="checkbox" name="chancost" value="40" onClick="test(this);" />40 <br />
    <input type="checkbox" name="chanlcost" value="60" onClick="test(this);" />60 <br />
    </div>
    Total Amount : <span id="Totalcost"> </span><BR><BR><BR>
	
  </body>
</html>

您的代码中有许多不一致之处。。。。。

替换为：

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
var total = 0;
function test(){
    var checkboxes = document.getElementById('container').getElementsByTagName("input");
    var box_value = parseInt(document.getElementById('chatinput').value);
    var new_total = 0;
    for(var i=0; i<checkboxes.length; i++){
        var item = checkboxes[i];
        if(item.checked){
            new_total += parseInt(item.value);
        }
    }
    if(box_value>0){ total = (new_total>0?new_total:1) * box_value; }
    else{ total = new_total; }
    document.getElementById('Totalcost').innerHTML = total ;
}
</script>
</head>
<body>
<input type="text"  id="chatinput" onchange="test()"><br>
<p id="printchatbox"></p>
<div id="container">
    <p id="printc"></p>
    <input type="checkbox" name="channcost" value="10" onClick="test();"  />10<br />
    <input type="checkbox" name="chanlcost" value="20" onClick="test();" />20 <br />
    <input type="checkbox" name="chanlcost" value="40" onClick="test();" />40 <br />
    <input type="checkbox" name="chanlcost" value="60" onClick="test();" />60 <br />
</div>
Total Amount : <span id="Totalcost"> </span><BR><BR><BR>
</body>
</html>

我更改了您的脚本，使这些更改成为

    var total = 0;
    function test(item){
    var inputBox = document.getElementById('chatinput');
      if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        inputValue = $("#chatinput").val();
        textValue = (isNaN(inputValue)) ? 1 : parseInt(inputValue);
        if(textValue == "NaN"){
            textValue = 1;
        }
        totalAfterMul = total*textValue;
        console.log(totalAfterMul);
        document.getElementById('Totalcost').innerHTML = totalAfterMul ;
    }

它会做你想做的事。它获取输入值，然后将其与复选框的总和相乘。如果输入值不是数字，则将其视为1

inputValue = $("#chatinput").val();
textValue = (isNaN(inputValue)) ? 1 : parseInt(inputValue);
if(textValue == "NaN"){
    textValue = 1;
}
totalAfterMul = total*textValue;
相关文章：