title: javascript and asp.net web user controls
body: <p>I have a web user control that generates the following html on the client.  </p>
  
  <p>I want to reference a specific RadioButton control using JavaScript. </p>
  
  <p>I am not sure how to do this as the RadioButton ID is generated by asp.net.  </p>
  
  <p>For example I give the RadioButton ID = <code>1_RadioButton</code></p>
  
  <p>asp.net generates an ID = <code>ctl00_ContentPlaceHolder1_Material_1_RadioButton</code></p>
  
  <p>how can this javascript code find  Radio Button controls?  </p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              if (document.getElementById("1_RadioButton").checked) {
                  $("#1_other").hide();
              }
          });    
      &lt;/script&gt;
  </code></pre>
  
  <p>The following is what asp.net generates for the client.</p>
  
  <pre><code>    &lt;input id="ctl00_ContentPlaceHolder1_Material_1_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="1_RadioButton" onclick="javascript:$('#1_other').show('fast');" /&gt;
  
      &lt;label for="ctl00_ContentPlaceHolder1_Material_1_RadioButton"&gt;Yes&lt;/label&gt;
  
      &lt;input id="ctl00_ContentPlaceHolder1_Material_2_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="2_RadioButton" checked="checked" onclick="javascript:$('#1_other').hide('fast');" /&gt;
  
      &lt;label for="ctl00_ContentPlaceHolder1_Material_2_RadioButton"&gt;No&lt;/label&gt;
  
      &lt;input id="ctl00_ContentPlaceHolder1_Material_3_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="3_RadioButton" onclick="javascript:$('#1_other').hide('fast');" /&gt;
  
      &lt;label for="ctl00_ContentPlaceHolder1_Material_3_RadioButton"&gt;Uncertain&lt;/label&gt;
  
      &lt;div id='1_other'&gt;
           &lt;input name="ctl00$ContentPlaceHolder1$Material$4_TextBox" type="text" value="bbb chabng" id="ctl00_ContentPlaceHolder1_Material_4_TextBox" /&gt;
     &lt;/div&gt;
  </code></pre>