Multiple values for checkbox in JavaScript?

JavaScript
1

I am trying out checkbox total calculator code examples, which automatically calculates the values of checked/unchecked items, and so far so good.

My question is if it’s at all possible for each checkbox to have multiple values, so i can have different sets of totals? I have been looking for examples all over with no luck. I have seen examples for Radio buttons, which separates the different totals with commas, but i don’t have enough JavaScript experience to understand it fully. Any help would be greatly appreciated. Thank you.

2

1 way to do it is to separate the values in your html using a unique character or combination of characters and then use split() in javascript or explode() in php to separate the individual values for each checkbox.

3

Thanks for the reply. But sorry i so don’t really get it. The reason i didn’t include code snippets etc was because i wanted to do as much of it as possible and learn. But this is still way too advanced for me. Do you have a simple, generic example?

4

I’m not sure how this fits into your calculator without seeing your code, but I think you mean something similar to this

 
<input type="checkbox" name="chkSomeName" value="val1#val2#val3" />

and then use split() or [URL=“http://php.net/manual/en/function.explode.php”]explode() to separate the checkbox’s value string into the 3 individual values.

5

Thanks again Kalon,

This is the script (from one i found online (A))

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.calc.pay.value = witem1 + witem2 + witem3 + witem4;
 document.getElementById('pay').innerHTML = witem1 + witem2 + witem3 + witem4;
 }

And the HTML from

<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">  Total price 2, $: &nbsp; <span id="pay"></span> <br /> </td>
 <td class="row">  Total price 3, $: &nbsp; <span id="pay"></span> <br /> </td> -->
   <td class="row">&nbsp;  </td>
  </tr>

</table>

</form>

So i guess split() will be somehow in another function? And how does that figure with the calculation? The values will be cumulative with each checkbox selection (if i’m making any sense)

6

In your 1st post you asked

In your code you are not assigning multiple values to each checkbox. You are assigning 1 of the 4 prices or 0.

So for example, for checkbox named item1 what are the multiple values you want assigned to it as per your original question.

7

Yes, i didn’t include all the values. Each checkbox has 10 values:

var item1price = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
var item2price = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
var item3price = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
var item4price = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

So there will be 10 different totals, such that:

Total 1 = 1 + 1 + 1 + 1
Total 2 = 2 + 2 + 2 + 2
Total 3 = 3 + 3 + 3 + 3, and so forth

8

ok - then split() or explode() (depending on whether you are doing this server or client side) would do what you want if you included the values for each checkbox in the html.

Otherwise, you can put the values of each itemprice in an array and then add up all the values from the 4 arrays, grouping by array index, for the checked checkboxes.

Since you said

The reason i didn’t include code snippets etc was because i wanted to do as much of it as possible and learn.

have a go at putting the itemprice values into an arrays and adding up the values for the checked boxes.

If you get stuck, post your updated code and we will try to help.

9

Thanks, giving it a go - but stuck already :frowning:

… you can put the values of each itemprice in an array

Item prices are in arrays:

var item1price = [];
var item2price = [];
var item3price = [];
var item4price = []; 

item1Array = "1, 2, 3, 4, 5, 6, 7, 8, 9, 10"; 
item2Array = "1, 2, 3, 4, 5, 6, 7, 8, 9, 10"; 
item3Array = "1, 2, 3, 4, 5, 6, 7, 8, 9, 10"; 
item4Array = "1, 2, 3, 4, 5, 6, 7, 8, 9, 10"; 

item1price = item1Array.split(",");
item2price = item2Array.split(",");
item3price = item3Array.split(",");
item4price = item4Array.split(","); ;

This is where i’m stuck:

… and then add up all the values from the 4 arrays, grouping by array index, for the checked checkboxes.

10

you only need split() if the values were included in the html as in my original post and not in the javascript.

In this case, to put the values in an array you only need

 
var item1price = [1,2,3,4,5,6,7,8,9,10];
var item2price = [1,2,3,4,5,6,7,8,9,10];
var item3price = [1,2,3,4,5,6,7,8,9,10];
var item4price = [1,2,3,4,5,6,7,8,9,10];

So onto the next step:

  1. If item1 is checked, what value or values do you want assigned to it?

  2. If item1 is not checked, what value or values do you want assigned to it?

11

I think i got it now! Will get on with it and post the (hopefully) finished code here.

Thanks so much :slight_smile:

12

Here is what i’ve got. Possibly not ‘elegant’, but it does what i want it to do. Thank you so much Kalon (y).

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

The HTML:

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