Radio Buttons And Checkboxes Grouped Together MVC

I'm trying to find an MVC (razor) solution where I can use radio buttons and checkboxes together. Say there are 2 radiobuttons labelled: All people and Family Members. If you selec

Solution 1:

Well you could do the following:

 <ul>
      <li><input type="radio">All People</input></li>
      <li>
          <input type="radio" class="toggle-family">Family Members</input>
          <ul class="member-selection hide">
              <li><input type="checkbox">Employee</input></li>
              ...
          </ul>
      </li>
 </ul>

Then in your javascript you could do the following:

 $(function() {
      $('.toggle-family').change(function() {
         if ($(this).attr('checked')) {
             $('.member-selection').removeClass('hide');
         } else {
             $('.member-selection').addClass('hide');
         }
      });
 });

Then you would need to just define a css class called "hide" and set it display attribute to none. This is just an idea to get you started, hope it helps.