html - Pass the name and value to JavaScript onClick function? -

i have function should disable group of check boxes if not checked. function designed work onclick() , passing 1 argument onclick(this) check box element. need function triggered on page load , need pass value database. tricky part have more 1 group of check boxes. here example of html layout:

<tr>     <td>        <input type="checkbox" name="o_outcomeck" id="o_firstoutcome" value="1" tabindex="1" <cfif trim(mydata.o_outcomeck) eq 1>checked</cfif> onclick="ckchange('o_outcomeck', 1)">first outcome     </td>     <td>        <input type="checkbox" name="o_outcomeck" id="o_secondoutcome" value="2" tabindex="1" <cfif trim(mydata.o_outcomeck) eq 2>checked</cfif> onclick="ckchange('o_outcomeck', 2)">second outcome     </td> </tr> <tr>     <td>        <input type="checkbox" name="o_progressck" id="o_firstprogress" value="1" tabindex="1" <cfif trim(mydata.o_progressck) eq 1>checked</cfif> onclick="ckchange('o_progressck', 1)">first progress     </td>     <td>        <input type="checkbox" name="o_progressck" id="o_secondprogress" value="2" tabindex="1" <cfif trim(mydata.o_progressck) eq 2>checked</cfif> onclick="ckchange('o_progressck', 2)">second progress     </td> </tr> 

above in each onclick function have tried pass checkbox name , value. when user click on check box should disable 1 unchecked. when load page value database decide check box checked , 1 not check should disabled @ time well. here javascript function:

function ckchange(cktype, ckval){     var ckname = document.getelementsbyname(cktype);     var numchecked = 0;     var index = 0;      for(var i=0; < ckname.length; i++){         if(ckname[i].checked){             numchecked++;             index = i;         }     }      for(var i=0; < ckname.length; i++){         if(numchecked == 0){             ckname[i].disabled = false;         }else{             if(i != index){                 ckname[i].disabled = true;             }         }     } } 

for reason function doesn't work expected. i'm thinking of passing id each time call fucntion on click how work on page load? here call function when user gets page:

<cfoutput>     ckchange('o_outcomeck','#trim(mydata.o_outcomeck)#');     ckchange('o_progressck','#trim(mydata.o_progressck)#'); </cfoutput> 

here i'm able pass name , value database. i'm open suggestions , different approach if more efficient. current code doesn't work. thank you.

here working solution. had remove coldfusion code, since code editor doesn't support it, , inserted temporary javascript (the first 4 statements) simulate imported data.

if 1 of check boxes checked, other disabled. if neither checked, both enabled. solution should scalable well, if add more check boxes either group.

try example make sure need to. it's simulating first box in o_outcomeck , second box in o_progressck being checked.

// simulate imported data & cf checkbox selecting  document.getelementsbyname("o_outcomeck")[0].checked = true;  document.getelementsbyname("o_progressck")[1].checked = true;  ckchange('o_outcomeck',1);  ckchange('o_progressck',2);      function ckchange(cktype, ckval){    var ckname = document.getelementsbyname(cktype);    var numchecked = 0;   // counter    var index = 0;        // index checked    for(var = 0; < ckname.length; i++){      // check boxes in set checked      if (ckname[i].checked) {        // if box clicked checked        numchecked++;        index = i;      }    }    if (numchecked == 0) {      // enable both boxes      (var = 0; < ckname.length; i++) {        ckname[i].disabled = false;      }    }    else {      // disable other box      (var = 0; < ckname.length; i++) {        if (i != index) {          ckname[i].disabled = true;        }      }    }  }

<table>  <tr>      <td>         <input type="checkbox" name="o_outcomeck" id="o_firstoutcome" value="1" tabindex="1" onclick="ckchange('o_outcomeck', 1)">first outcome      </td>      <td>         <input type="checkbox" name="o_outcomeck" id="o_secondoutcome" value="2" tabindex="1" onclick="ckchange('o_outcomeck', 2)">second outcome      </td>  </tr>  <tr>      <td>         <input type="checkbox" name="o_progressck" id="o_firstprogress" value="1" tabindex="1" onclick="ckchange('o_progressck', 1)">first progress      </td>      <td>         <input type="checkbox" name="o_progressck" id="o_secondprogress" value="2" tabindex="1" onclick="ckchange('o_progressck', 2)">second progress      </td>  </tr>  </table>

update: below alternate version of javascript, uses 1 for loop. if want use it, swap out javascript code above. html needs changed onclick attribute each checkbox, should changed onclick="ckchange(this)".

// simulate imported data & cf checkbox selecting document.getelementsbyname("o_progressck")[1].checked = true; ckchange("o_outcomeck", 0); ckchange("o_progressck", 2);  function ckchange(that, val){     var ischecked = false;     var wasclicked = false;     var index = 0;     var cktype = that;     if (!!that.type) {    // if called click       cktype = that.name;       wasclicked = true;       if (!!that.checked) {         index = that.value - 1;         ischecked = true;       }       }      var ckname = document.getelementsbyname(cktype);      for(var i=0; < ckname.length; i++){         if (ischecked) {           // if called click , box checked           if (index != i) {             ckname[i].disabled = true;           }         }         else if (wasclicked) {           // if called click , box unchecked           ckname[i].disabled = false;         }         else {           // if on load           if (val != 0) {             // 1 checked             if (i != val - 1) {               ckname[i].disabled = true;             }           }           else {             // none checked             ckname[i].disabled = false;           }                   }               } }