Question

我需要（每个复选框值X为其文本框值）的总和

<input name="33" value="280000" onclick="test(this);" type="checkbox">
<input id="33" style="width:20px;float: left; text-align: center" type="text">

示例：

 fist checkbox value = 20 X its textbox value = 10  
 second checkbox value = 5 X its textbox value = 2  
 my answer = 20*10 + 5*2 = 210 (ok)

我也需要当复选框值更改我的答案更改时，无需点击。

Answer 1

const totalBox = document.getElementById("total")

document.querySelectorAll("input[type=text]").forEach((input) => input.addEventListener("input", calculate))
document.querySelectorAll("input[type=checkbox]").forEach((input) => input.addEventListener("change", calculate))
function calculate() {
  const checkboxes = document.querySelectorAll("input[type=checkbox]")
  let total = 0
  for (let checkbox of checkboxes) {
  	if (checkbox.checked) {
      total += Number(checkbox.value) * Number(document.getElementById(checkbox.name).value)
    }
  }
  totalBox.textContent = total
}
calculate()

<input name="33" value="280000" type="checkbox" checked>
<input id="33" value="10" type="text">
<br/>
<input name="34" value="150000" type="checkbox">
<input id="34" value="15" type="text">
<h2>Total: <span id="total"></span></h2>

Answer 2

如果它们总是按2分组，您可以简单地获取所有输入，将每对值相乘并加起来：

var result = Array.from(document.getElementsByTagName("input")).reduce(function(result,el,i,arr){
   return result+i%2?el.value*(arr[i-1].checked?arr[i-1].value:0):0;
},0);

对于shure，这可以在 onchange 处理程序中执行。

http://jsbin.com/muvigedodu/edit?js

Answer 3

您可以使用解决方案https://jsfiddle.net/yuhpbz47/

＆＃13;

var total = 0;
$('button[type="submit"]').click(function(){

	$('input[type="checkbox"]').each(function(){
  	if($(this).is(':checked')){
    total += $(this).val() * (parseInt($(this).next().val()) || 0 );
    }
  });
	console.log(total);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="10" />
<input type="text" />

<br/>

<input type="checkbox" value="20"/>
<input type="text" />

<button type="submit">
Submit
</button>

＆＃13;

Answer 4

您正试图实现，当单击一个复选框时，一个值乘以输入复选框的值，然后对于所有复选框，给我们总和吧？如果是这样，下面的代码有充分的文件记录可以帮助它

观察我用来获得乘法值的模式，使其可以是动态的希望它有所帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Check boxes 
<br>
1. <input type="checkbox" value="10" multiply="20" class="sum"> value 10, multiply 20 <br>
2. <input type="checkbox" value="5" multiply="10" class="sum"> value 5, multiply 10  <br>
3. <input type="checkbox" value="3" multiply="5" class="sum"> value 3, multiply 5 <br>

<input type="hidden" value="0" id="sum">

value: <div id="view">

</div>

localhost:5432

jquery - 所有复选框值的总和*它们唯一的文本框值

4 个答案: