Question

我尝试将输入的文本输入值乘以点击的复选框值的总和。到目前为止，当您单击复选框时，他们的用户总和会立即显示在带有id =＆＃34; Totalcost＆＃34;的span元素上。如何将所选复选框的总和乘以在文本输入字段中输入的值。

＆＃13;

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

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></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>

＆＃13;

Answer 1

如果我正确地理解你，这样的事情可能有效。

单击复选框后，它将计算所有复选框的总计，将其与用户输入相乘，然后输出。

// When a checkbox is clicked
$('#container input[type=checkbox]').click(function() {
    // Get user input and set initial variable for the total
    inputBox = parseInt($('#chatinput').val());
    totalCheckbox = 0;
    // itterate through each checkbox
    // If it's checked, add the current value to total
    $('#container input[type=checkbox]').each(function() {
        if($(this).prop('checked'))
        {
            thisValue = parseInt($(this).val());
            totalCheckbox = totalCheckbox + thisValue;
        }
    });
    // Output the total checkbox value multipled against user input
    $('#Totalcost').html(total * inputBox);    
});

jsfiddle

Answer 2

function test(item) {
  var operand1 = parseFloat($('#chatinput').val());
  var operand2 = 0;
  var result;

  $('input:checked').each(function() {
    operand2 += parseInt($(this).val(), 10)
  });

  // operand1 could be NaN
  // you need to decide what to do in that case
  result = operand1 * operand2;

  $('#Totalcost').html(result);
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
  <input type="number" 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="chancost" 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 3

我尝试将输入的文字输入值与复选框值相乘，然后添加点击的总金额。

<html>
<input class="selectproduct" type="checkbox" name="item0" value="5" />First(5)
<input id="a" type="text" name="qty0" />
 <br/>
<input class="selectproduct" type="checkbox" name="item1" value="7" />Second(7)
 <input id="a" type="text" name="qty1" />
 <br/>
 <input class="selectproduct" type="checkbox" name="item2" value="10" />Third(10)
 <br/>
<input class="selectproduct" type="checkbox" name="item2" value="8"  />Fourth(8)
<br/> Total Price: $<span id="price" class="price">0</span>

<script>
var checkbox = document.getElementsByClassName('selectproduct'),
price = document.getElementById('price');

for (var i=0; i < checkbox.length; i++) {
    checkbox[i].onchange = function() {
        var inputBox = document.getElementById('a');
        var add = this.value * (this.checked ? 1 : -1);
        total = add*parseInt(this.value);

        price.innerHTML = parseFloat(price.innerHTML)+total
    }
}
</script>
</html>

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

3 个答案: