One Checkbox with multiple values?

Question

ayooshkasmth 0 Light Poster

14 Years Ago

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>

javascript

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with x-ms-bmp files.

screenshot.bmp (370.37 KB)

Edited 14 Years Ago by ayooshkasmth because: Upload image

3 Contributors
3 Replies
3K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Taywin 312 Posting Virtuoso

14 Years Ago

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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ayooshkasmth 0 Light Poster · Answer 1 · 2010-11-04T05:53:31+00:00

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>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2010-11-04T07:08:11+00:00

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