title: Pass the name and value to JavaScript onClick function?
body: <p>I have function that originally should disable group of check boxes if they are not checked. This function was designed to work onClick() and I was passing one argument onClick(this) from check box element. Now I need this function to be triggered on page load and I would need to pass the value from database. Tricky part is that I have more than one group of check boxes. Here is example of my HTML layout:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
         &lt;input type="checkbox" name="o_outcomeCk" id="o_firstOutcome" value="1" tabIndex="1" &lt;cfif Trim(myData.o_outcomeCk) EQ 1&gt;checked&lt;/cfif&gt; onClick="ckChange('o_outcomeCk', 1)"&gt;First Outcome
      &lt;/td&gt;
      &lt;td&gt;
         &lt;input type="checkbox" name="o_outcomeCk" id="o_secondOutcome" value="2" tabIndex="1" &lt;cfif Trim(myData.o_outcomeCk) EQ 2&gt;checked&lt;/cfif&gt; onClick="ckChange('o_outcomeCk', 2)"&gt;Second Outcome
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
         &lt;input type="checkbox" name="o_progressCk" id="o_firstProgress" value="1" tabIndex="1" &lt;cfif Trim(myData.o_progressCk) EQ 1&gt;checked&lt;/cfif&gt; onClick="ckChange('o_progressCk', 1)"&gt;First Progress
      &lt;/td&gt;
      &lt;td&gt;
         &lt;input type="checkbox" name="o_progressCk" id="o_secondProgress" value="2" tabIndex="1" &lt;cfif Trim(myData.o_progressCk) EQ 2&gt;checked&lt;/cfif&gt; onClick="ckChange('o_progressCk', 2)"&gt;Second Progress
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Above in each onClick function I have tried to pass the checkbox name and value. When user click on the check box I should disable one that is unchecked. Also when I load the page value from database will decide which check box is checked and one that is not check should be disabled at this time as well. Here is my Javascript function:</p>
  
  <pre><code>function ckChange(ckType, ckVal){
      var ckName = document.getElementsByName(ckType);
      var numChecked = 0;
      var index = 0;
  
      for(var i=0; i &lt; ckName.length; i++){
          if(ckName[i].checked){
              numChecked++;
              index = i;
          }
      }
  
      for(var i=0; i &lt; ckName.length; i++){
          if(numChecked == 0){
              ckName[i].disabled = false;
          }else{
              if(i != index){
                  ckName[i].disabled = true;
              }
          }
      }
  }
  </code></pre>
  
  <p>For some reason my function doesn't work as expected. I'm thinking also of passing the id each time I call this fucntion on click but then how that will work on page load? Here is what I do to call the function when user gets to the page:</p>
  
  <pre><code>&lt;cfoutput&gt;
      ckChange('o_outcomeCk','#Trim(myData.o_outcomeCk)#');
      ckChange('o_progressCk','#Trim(myData.o_progressCk)#');
  &lt;/cfoutput&gt;
  </code></pre>
  
  <p>Here I'm able to pass the name and value from database. I'm open for suggestions and different approach if that would be more efficient. My current code doesn't work. Thank you.</p>