SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple values for checkbox in JavaScript?

    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. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Quote Originally Posted by Kalon View Post
    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.

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how this fits into your calculator without seeing your code, but I think you mean something similar to this

    Code:
     
    <input type="checkbox" name="chkSomeName" value="val1#val2#val3" />
    and then use split() or explode() to separate the checkbox's value string into the 3 individual values.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Kalon,

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

    Code JavaScript:
    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
    Code HTML4Strict:
    <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. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your 1st post you asked

    Quote Originally Posted by ayooshkasmth View Post
    My question is if it's at all possible for each checkbox to have multiple values,........
    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. #7
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, i didn't include all the values. Each checkbox has 10 values:

    Code JavaScript:
    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. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, giving it a go - but stuck already

    .. you can put the values of each itemprice in an array
    Item prices are in arrays:
    Code JavaScript:
    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. #10
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
     
    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. #11
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think i got it now! Will get on with it and post the (hopefully) finished code here.

    Thanks so much

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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

    Code JavaScript:
    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:
    Code HTML4Strict:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •