Question

我正在尝试将输入的文本输入值乘以单击的复选框值的总和。到目前为止，当您单击复选框时，他们的avues的总和会立即显示在带有id =“Totalcost”的span元素上....我需要一些帮助来确定如何将所选复选框的总和与输入的值相乘文本输入字段。

如果可以使用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>

Answer 1

你的代码中有很多不一致的东西......

替换为：

<!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>

Answer 2

我更改了您的脚本以进行这些更改

    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;

将文本放置值与复选框值的总和相乘，并将其显示在段落上

2 个答案: