CODEWITHSUNDEEP
javascriptjqueryhtml
Alireza Sabahi
Alireza Sabahi

Reputation: 675

jquery - sum of all checkbox value * their unique textbox value

i need sum of (every check box value X its textbox value)

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

example: 

 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)

also i need when checkbox value changes my answer change, without click.

Upvotes: 1

Views: 1342

Answers (4)

marzelin
marzelin

Reputation: 11600

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>

Upvotes: 1

Theophilus Omoregbee
Theophilus Omoregbee

Reputation: 2503

You are trying to achieve, when a check box is clicked a value is multiplied by the value of the input check box then for all check box give us the sum right? if so this below code which is well documented should help out with it

Observe the pattern i used to get the multiply value so it can be dynamic Hope it helps.

$(document).ready(
function(){

/**
* this is used to update our view so you see what we are   * doing currently now
*/
function updateView(value){
$("#view").html(value);
}

$(".sum").click(function(event){
//we get our value to multiply our value with 
var multiply = $(this).attr("multiply"); 
var value = $(this).val();

//we multiply here 
var answer = multiply*value;

//we sum up this value with the sum in the hidden fied if checked else substract

var sumField = $("#sum");

if($(this).is(':checked')){
sumField.val(Number(sumField.val())+answer);
}else{
sumField.val(Number(sumField.val())-answer);
}

//update our view
updateView(sumField.val());
});



} 
);
<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>

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138267

If they are always grouped by two you can simply take all inputs, multiply every pairs value and add it up:

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

for shure this can be executed inside an onchange handler.

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

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Here you go with the solution https://jsfiddle.net/yuhpbz47/

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);
});
<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>

Upvotes: 1

Related Questions