JavaScript - Hidden Value Based On Checkbox

Hi, i have a page with lots of checkboxes and hidden fields. When i tick a checkbox i want it to give the hidden filed a value. But give it no value if it is not ticked. For every checkbox i have a hidden field is with it. Both the checkbox and the hidden field send information. I have used some js scripts but they don't seem to work with more than one checkbox. Please can you help.

Example:

<input type="checkbox" name="box1" id="box1" value="4th July 2009,">
<input type="hidden" name="price1" id="price1" value="0">

So when box1 is ticked it then gives price1 a value. But if not ticked then the value remains at 0. I want it to give a value of 699.
There will be about 100 checkboxes and hidden fields on the page. Also onclick behaviours do not work because it may still send the information if the checkbox is not checked.

So for the next checkbox and hidden field i use box2 and price2.

Thanks for your help.

I dont claim any of the JS below as my own.

link to an example page http://www.clansngamers.com/add_new_game.php

You see the PS3 checkbox is standard: Working, It brings up the hidden div.
The Xbox checkbox is coded exactly the same except it uses the custom checkbox image and it dont work. This is my problem.

have tried to code this and failed asking for any help i suck at JS.

The Code Im trying to add
Code:

function showMe(id){ var obj = document.getElementById(id);
  if (obj.style.display == "none"){obj.style.display = "inherit";}
  else {obj.style.display = "none";}
}

The basic layout
Code:

<input class="styled" name="foo" type="checkbox" id="foo" value="1" onclick="showMe('div1')" />
<input class="styled" name="bar" type="checkbox" id="bar" value="1" onclick="showMe('div2')" />
<div id='div1' style="display:none;">hidden content 1</div>
<div id='div2' style="display:none;">hidden content 2</div>

Custom Checkbox code
Code:

var checkboxHeight = "14";
var radioHeight = "14";
var selectWidth = "190";

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
   init: function() {
      var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
      for(a = 0; a < inputs.length; a++) {
         if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
            span[a] = document.createElement("span");
            span[a].className = inputs[a].type;

            if(inputs[a].checked == true) {
               if(inputs[a].type == "checkbox") {
                  position = "0 -" + (checkboxHeight*2) + "px";
                  span[a].style.top = position;
               } else {
                  position = "0 -" + (radioHeight*2) + "px";
                  span[a].style.backgroundPosition = position;
               }
            }
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            inputs[a].onchange = Custom.clear;
            if(!inputs[a].getAttribute("disabled")) {
               span[a].onmousedown = Custom.pushed;
               span[a].onmouseup = Custom.check;
            } else {
               span[a].className = span[a].className += " disabled";
            }
         }
      }
      inputs = document.getElementsByTagName("select");
      for(a = 0; a < inputs.length; a++) {
         if(inputs[a].className == "styled") {
            option = inputs[a].getElementsByTagName("option");
            active = option[0].childNodes[0].nodeValue;
            textnode = document.createTextNode(active);
            for(b = 0; b < option.length; b++) {
               if(option[b].selected == true) {
                  textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
               }
            }
            span[a] = document.createElement("span");
            span[a].className = "select";
            span[a].id = "select" + inputs[a].name;
            span[a].appendChild(textnode);
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            if(!inputs[a].getAttribute("disabled")) {
               inputs[a].onchange = Custom.choose;
            } else {
               inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
            }
         }
      }
      document.onmouseup = Custom.clear;
   },
   pushed: function() {
      element = this.nextSibling;
      if(element.checked == true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
      } else if(element.checked == true && element.type == "radio") {
         this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
      } else if(element.checked != true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
      } else {
         this.style.backgroundPosition = "0 -" + radioHeight + "px";
      }
   },
   check: function() {
      element = this.nextSibling;
      if(element.checked == true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 0";
         element.checked = false;
      } else {
         if(element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
         } else {
            this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
            group = this.nextSibling.name;
            inputs = document.getElementsByTagName("input");
            for(a = 0; a < inputs.length; a++) {
               if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                  inputs[a].previousSibling.style.backgroundPosition = "0 0";
               }
            }
         }
         element.checked = true;
      }
   },
   clear: function() {
      inputs = document.getElementsByTagName("input");
      for(var b = 0; b < inputs.length; b++) {
         if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
         } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
         } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
         } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
         }
      }
   },
   choose: function() {
      option = this.getElementsByTagName("option");
      for(d = 0; d < option.length; d++) {
         if(option[d].selected == true) {
            document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
         }
      }
   }
}
window.onload = Custom.init;

ok so here is my situation

i have 4 hidden fields in a form called "searchform"

Code:

<input type="hidden" name="forumchoice[]" value="1" checked />
<input type="hidden" name="forumchoice[]" value="2" checked />

<input type="hidden" name="forumchoice[]" value="3" checked />
<input type="hidden" name="forumchoice[]" value="4" checked />

Now here's what i want to do:

i have two checkbox

Code:

<input  onclick="??????????" type="checkbox" name="checkbox1" id="checkbox1"/>
<input  onclick="??????????" type="checkbox" name="checkbox2" id="checkbox2"/>

- when checkbox1 is checked, i want to activate the hidden inputs 1 & 2. if it is unchecked, then desactivate hidden inputs 1&2

- when checkbox2 is checked, i want to activate the hidden inputs 3 & 4. if it is unchecked, then desactivate hidden inputs 3&4


could someone help me with the "onclick" code i would need to do this ??

thanks a lot!!

i'm trying to "post" the selected checkboxes (name and value) into a mysql database;
i've search "docter google" for some answers and read that the "easiest" way to do this is to collect the checkboxes and put the values and names in to an hidden textfield ( function setvalue() ) and collect this textfield in a new page with php; but this doesn't work.
it seems that the variable naamtest is empty (when i load a word into this var arv it does work)

can someone find my error?

Code:

<script type="text/javascript">
function shift(which)
{

var counter = 0;  // counter for checked checkboxes     
var i       = 0;  // loop variable     
var veck     = "";// final url variable 
var beginsaldo = 79;
var namen_array = "";
var va_array = "";
var namen = "";
var valu = "";
var input_obj = document.getElementsByTagName('input');      // get a collection of objects with the specified 'input' TAGNAME     
for (i=0; i < input_obj.length; i++){            // loop through all collected objects    
if (input_obj[i].type == 'checkbox' && input_obj[i].checked == true){             // if input object is checkbox and checkbox is checked then ...      
counter++;			// ... increase counter 
var valcheck = input_obj[i].value;		// waarde van de geselecteerde checkbox in variable steken
test = Number(valcheck);		// absolute rekenwaarde van variable maken
beginsaldo -=   test; //beginsaldo verminderen met de checkbox value   

if (counter > 0){
var naam = input_obj[i].name + '  ';
var val = input_obj[i].value + '  ';
namen = namen +  naam; 
valu = valu +  val; 
namen_array	= 	namen.split("  ");
va_array	= 	valu.split("  ");
var naamtest = namen_array;

}}}  
if (counter > 10){
alert ("u mag maar 10 renners selecteren");

var tr = which.parentNode;
    while ( tr.tagName.toUpperCase() != "TR" )
    {
        tr = tr.parentNode;
        if ( tr == null ) return; // something went very wrong!
    }
    var tds = tr.getElementsByTagName("td");
        tds[0].getElementsByTagName("input")[0].checked = false;
}

else if (beginsaldo < 0){
alert ("uw saldo is te laag om dit uit te voeren");

var tr = which.parentNode;
    while ( tr.tagName.toUpperCase() != "TR" )
    {
        tr = tr.parentNode;
        if ( tr == null ) return; // something went very wrong!
    }
    var tds = tr.getElementsByTagName("td");
        tds[0].getElementsByTagName("input")[0].checked = false;
}

else{

    var tr = which.parentNode;
    while ( tr.tagName.toUpperCase() != "TR" )
    {
        tr = tr.parentNode;
        if ( tr == null ) return; // something went very wrong!
    }
    var tds = tr.getElementsByTagName("td");
    if ( tds[0].getElementsByTagName("input")[0] == which )
    {
        tds[2].innerHTML = tds[0].innerHTML;
        tds[0].innerHTML = "&nbsp;";
        tds[3].innerHTML = tds[1].innerHTML;
        tds[1].innerHTML = "&nbsp;";
        tds[2].getElementsByTagName("input")[0].checked = true;
    } else {
        // this code is optional!!
        tds[0].innerHTML = tds[2].innerHTML;
        tds[2].innerHTML = "&nbsp;";
        tds[1].innerHTML = tds[3].innerHTML;
        tds[3].innerHTML = "&nbsp;";
        tds[0].getElementsByTagName("input")[0].checked = false;
    }

function setValue()
{

var arv = naamtest.join();
// This line converts js array to String 
document.f2.arv.value=arv;
// This sets the string to the hidden form field. 
}}}
</script>

Hi,

Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select.
For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41].

This is probably way, way off but I've done this and it doesn't work.

Any help would be greatly appreciated, thanks.


<script language="JavaScript">
function changelist() {
//here we assign the value of the hidden input to x
x=eval(document.getElementByName("SelectLists[40]");

if(document.getElementById("SelectLists[40]").selected=true
x=SelectLists[40]

else(document.getElementById("SelectLists[41]").selected=true
x=SelectLists[41]

else(document.getElementById("SelectLists[42]").selected=true
x=SelectLists[42]

//now we assign the new value to the input
document.getElementById("theHiddenInput").name=x;

//and now we test
alert(document.getElementById("theHiddenInput").name)


}
</script>





<input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
<select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
<option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option>
<option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option>
<option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option>