0

I am trying to do some JavaScript calculation with checkboxes, and have been able to modify some codes to do bits of what i want to do. (Screenshot attached)

However, i want each checkbox to have multiple values, and therefore multiple results.

I can't find any examples, but i've come across something similar with Radio buttons (http://javascript.about.com/library/blmulti1.htm). I don't 'get' the example enough to proceed.

My question is, is it even possible to do with a checkbox, and if so how do i go about doing it please? Any help would be greatly appreciated.

The Javascript code:

function count() { 
var item1price = 10;
var item2price = 50;
var item3price = 1100;
var item4price = 100;
 
 if (calc.item1.checked){ 
   var witem1 = document.calc.item1.value = item1price; } 
   else { 
   var witem1 = document.calc.item1.value = 0; }

 if (calc.item2.checked){ 
   var witem2 = document.calc.item2.value = item2price; } 
   else { 
   var witem2 = document.calc.item2.value = 0; }

 if (calc.item3.checked) { 
   var witem3 = document.calc.item3.value = item3price; } 
   else { 
   var witem3 = document.calc.item3.value = 0; }

 if (calc.item4.checked) { 
   var witem4 = document.calc.item4.value = item4price;} 
   else { 
   var witem4 = document.calc.item4.value = 0; } 

 document.getElementById('pay').innerHTML = witem1 + witem2 + witem3 + witem4;
 }

The HTML form:

<form name="calc" method="POST">

<br /> 
<table class="gqra"> 

  <tr>
   <td class="row2" ><span> Item </span></th>
   <td class="row2" ><span> Select </span></th>
  </tr>

  <tr>
   <td class="row"><span> Item 1 </span></td>
   <td class="row"><input type="checkbox" name="item1"></td>
  </tr>

  <tr>
   <td class="row"><span> Item 2 </span></td>
   <td class="row"><input type="checkbox" name="item2"></td>
  </tr>

  <tr>
   <td class="row"><span> Item 3 </span></td>
   <td class="row"><input type="checkbox" name="item3"></td>
  </tr>

  <tr>
   <td class="row"><span> Item 4 </span></td>
   <td class="row"><input type="checkbox" name="item4" ></td>
  </tr> 
  
  <tr>
    <td class="row">&nbsp;</td>
    <td class="row">
       <input type="button" onClick="count()" value="Calculate" > 
       <input type="reset" value="Reset" >
    </td> 
  </tr>

  <tr>
   <td class="row"> Total price, $: &nbsp; <span id="pay"></span> <br /> </td>
   <td class="row">&nbsp;</td>
  </tr> 

</table>

</form>

Edited by ayooshkasmth: Upload image

3
Contributors
3
Replies
7
Views
6 Years
Discussion Span
Last Post by Airshow
0

From looking at your screen shot, I believe you want to be able to calculate amount from checked items. That's what checkbox is for. The only issue you have is that you don't know how to use it. No, you aren't supposed to give multiple values to a checkbox but rather give only 1 value. However, when you check on of them, you just go through all of them and see if any is checked.

To apply to what you want to do, you should assign a value to your check box with the same name. Then go through each time to see if any is checked. If it is checked, add its value to your sum. A sample code is below.

<html>
<script type="text/javascript">
function count() {
  var chkboxes = document.getElementsByName("itemn")
  var sum = 0
  for (var i=0; i<chkboxes.length; i++) {
    if (chkboxes[i].checked==true) {
      sum += parseInt(chkboxes[i].value)
    }
  }
  document.getElementById('pay').innerHTML = sum
}
</script>
</head>

<body>
 <form name="calc" method="POST">

<br /> 
<table class="gqra"> 

  <tr>
   <td class="row2" ><span> Item </span></th>
   <td class="row2" ><span> Select </span></th>
  </tr>

  <tr>
   <td class="row"><span> Item 1 </span></td>
   <td class="row"><input type="checkbox" name="itemn" value=10></td>
  </tr>

  <tr>
   <td class="row"><span> Item 2 </span></td>
   <td class="row"><input type="checkbox" name="itemn" value=50></td>
  </tr>

  <tr>
   <td class="row"><span> Item 3 </span></td>
   <td class="row"><input type="checkbox" name="itemn" value=1100></td>
  </tr>

  <tr>
   <td class="row"><span> Item 4 </span></td>
   <td class="row"><input type="checkbox" name="itemn" value=100></td>
  </tr> 
  
  <tr>
    <td class="row">&nbsp;</td>
    <td class="row">
       <input type="button" onClick="count()" value="Calculate" > 
       <input type="reset" value="Reset">
    </td> 
  </tr>

  <tr>
   <td class="row"> Total price, $: &nbsp; <span id="pay"></span> <br /> </td>
   <td class="row">&nbsp;</td>
  </tr> 

</table>

</form>
</body>
</html>
0

Thanks Taywin. I've solved it, with some help from someone. Here's the code for the script:

function count() { 
 
var item1price = [01,02,03,04,05,06,07,08,09,10];
var item2price = [11,12,13,14,15,16,17,18,19,20];
var item3price = [21,22,23,24,25,26,27,28,29,30];
var item4price = [31,32,33,34,35,36,37,38,39,40]; 
 
if (calc.item1.checked){ 
   var witem1 = document.calc.item1.value = item1price[0]+item1price[1]+item1price[2]+item1price[3]; 
   var witem2 = document.calc.item1.value = item1price[1]+item2price[1]+item3price[1]+item4price[1]; 
   var witem3 = document.calc.item1.value = item1price[2]+item2price[2]+item3price[2]+item4price[2]; 
   var witem4 = document.calc.item1.value = item1price[3]+item2price[3]+item3price[3]+item4price[3];   } 
else { 
   var witem1 = document.calc.item1.value = 0; 
   var witem2 = document.calc.item1.value = 0; 
   var witem3 = document.calc.item1.value = 0; 
   var witem4 = document.calc.item1.value = 0;  }
 
if (calc.item2.checked){ 
   var witem5 = document.calc.item2.value = item1price[0]+item2price[1]+item3price[1]+item4price[1];
   var witem6 = document.calc.item2.value = item1price[1]+item2price[1]+item3price[1]+item4price[1]; 
   var witem7 = document.calc.item2.value = item1price[2]+item2price[1]+item3price[1]+item4price[1];
   var witem8 = document.calc.item2.value = item1price[3]+item2price[1]+item3price[1]+item4price[1];   } 
else { 
   var witem5 = document.calc.item2.value = 0; 
   var witem6 = document.calc.item2.value = 0; 
   var witem7 = document.calc.item2.value = 0; 
   var witem8 = document.calc.item2.value = 0;   }
 
if (calc.item3.checked) { 
   var witem9  = document.calc.item3.value = item1price[0]+item2price[2]+item3price[2]+item4price[2]; 
   var witem10 = document.calc.item3.value = item1price[1]+item2price[2]+item3price[2]+item4price[2]; 
   var witem11 = document.calc.item3.value = item1price[2]+item2price[2]+item3price[2]+item4price[2]; 
   var witem12 = document.calc.item3.value = item1price[3]+item2price[2]+item3price[2]+item4price[2]; } 
else { 
   var witem9  = document.calc.item3.value = 0; 
   var witem10 = document.calc.item3.value = 0;
   var witem11 = document.calc.item3.value = 0;
   var witem12 = document.calc.item3.value = 0; }
 
if (calc.item4.checked) { 
   var witem13 = document.calc.item4.value = item1price[0]+item2price[3]+item3price[3]+item4price[3]; 
   var witem14 = document.calc.item4.value = item1price[1]+item2price[3]+item3price[3]+item4price[3]; 
   var witem15 = document.calc.item4.value = item1price[2]+item2price[3]+item3price[3]+item4price[3]; 
   var witem16 = document.calc.item4.value = item1price[3]+item2price[3]+item3price[3]+item4price[3]; } 
else { 
   var witem13 = document.calc.item4.value = 0; 
   var witem14 = document.calc.item4.value = 0; 
   var witem15 = document.calc.item4.value = 0; 
   var witem16 = document.calc.item4.value = 0;  } 
 
 document.getElementById('pay1').innerHTML = witem1 + witem5 + witem9 + witem13; 
 document.getElementById('pay2').innerHTML = witem2 + witem6 + witem10 + witem14; 
 document.getElementById('pay3').innerHTML = witem3 + witem7 + witem11 + witem15; 
 document.getElementById('pay4').innerHTML = witem4 + witem8 + witem12 + witem16;
 }

And the form:

<body onLoad="load()">  
<form name="calc" method="POST">
 
<br /> 
<table class="gqra"> 
 
  <tr>
   <td class="row2" ><span> Item </span></th>
   <td class="row2" ><span> Select </span></th>
  </tr>
 
 
  <tr>
   <td class="row"><span> Item 1 </span></td>
   <td class="row"><input type="checkbox" name="item1"></td>
  </tr>
 
  <tr>
   <td class="row"><span> Item 2 </span></td>
   <td class="row"><input type="checkbox" name="item2"></td>
  </tr>
 
  <tr>
   <td class="row"><span> Item 3 </span></td>
   <td class="row"><input type="checkbox" name="item3"></td>
  </tr>
 
  <tr>
   <td class="row"><span> Item 4 </span></td>
   <td class="row"><input type="checkbox" name="item4" ></td>
  </tr> 
  
  <tr>
    <td class="row">&nbsp;</td>
    <td class="row">
       <input type="button" onClick="count()" value="Calculate" >*
       <input type="reset" value="Reset" >
    </td> 
  </tr>
 
  <tr>
   <td class="row"> Total price, $: &nbsp; <span id="pay1"></span> <br /> </td>
   <td class="row">&nbsp;  </td>
  </tr>
  
  <tr>
   <td class="row"> Total price, $: &nbsp; <span id="pay2"></span> <br /> </td>
   <td class="row">&nbsp;  </td>
  </tr> 
 
  <tr>
   <td class="row"> Total price, $: &nbsp; <span id="pay3"></span> <br /> </td>
   <td class="row">&nbsp;  </td>
  </tr>
  
  <tr>
   <td class="row"> Total price, $: &nbsp; <span id="pay4"></span> <br /> </td>
   <td class="row">&nbsp;  </td>
  </tr> 
</table>
 
</form>
</body>
0

Whaaaaaaat!

This solution is completely and utterly unpredicatable from anything that preceded it and, for me, asks far more questions than it answers. "Why" is just the starter.

Airshow

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.