title: how to handle click or change event for radiobuttonfor in mvc3
body: <p>I am creating a simple user registration form. The user can be registered as a company or individual. Following is the relevant view for the Registration form that uses RadioButtonFor html helper. I have defined the id property to be used in the javascript:</p>
  
  <pre><code>    @model LayoutTest.ViewModels.ProjectUser
      &lt;script&gt;
      $(function () {
      $("#Class_UserType").change(function(){
          var value = $(this).val();
          if (value == 1) {
              $('#Person').hide();
          }
          else if (value == 2) {
              $('#Company').hide();
          }
        });
      });
      &lt;/script&gt;
      @using (Html.BeginForm("Create", "Project", FormMethod.Post, new { enctype = "multipart/form-data" }))
      {
     @Html.ValidationSummary(true)
     &lt;fieldset&gt;
     &lt;div class="new_row"&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; Model.UserType)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;div class="editor-field"&gt;
                  @Html.RadioButtonFor(model =&gt; model.UserType, (int)UserType.Company, new { @id= "Class_UserType" }) Company
                  @{Html.ValidateFor(model =&gt; model.UserType);}
              &lt;/div&gt;
              &lt;div class="editor-field"&gt;
                  @Html.RadioButtonFor(model =&gt; model.UserType, (int)UserType.Individual, new { @id = "Class_UserType" }) Individual 
                  @{Html.ValidateFor(model =&gt; model.UserType);}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Company"&gt;
            HTML Tags inside
      &lt;/div&gt;
      &lt;div class="Person"&gt;
          HTML Tags inside
      &lt;/div&gt;
  </code></pre>
  
  <p>This code should hide the respective divs Company/Person, when working correctly. I have looked at numerous samples but cannot figure out what I am doing wrong here! Any help will be appreciated.</p>
  
  <p>Following is the relevant html output:</p>
  
  <pre><code>    &lt;div class="new_row"&gt;
          &lt;div class="editor-label"&gt;
              &lt;label for="UserType"&gt;*User Type&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;div class="editor-field"&gt;
                  &lt;input data-val="true" data-val-number="The field *User Type must be a number." data-val-required="The *User Type field is required." id="Class_UserType" name="UserType" type="radio" value="1" /&gt; Company
              &lt;/div&gt;
              &lt;div class="editor-field"&gt;
                  &lt;input checked="checked" id="Class_UserType" name="UserType" type="radio" value="2" /&gt; Individual 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>