jQuery: How would I show/hide these elements?

Question

Here's my HTML:

<ul>
  <li>
    <p><label><input type="checkbox" name="permission" value="1" class="permission_check" checked> Joe Schmoe</label></p>
    <p class="radio_option"><label><input type="radio" name="viewpromote" value="1"> View and Promote</label></p>
    <p class="radio_option"><label><input type="radio" name="createedit" value="1" checked> ...plus Create and Edit</label></p>
  </li>
  <li>
    <p><label><input type="checkbox" name="permission" value="1" class="permission_check" checked> Bob Smith</label></p>
    <p class="radio_option"><label><input type="radio" name="viewpromote" value="1" checked> View and Promote</label></p>
    <p class="radio_option"><label><input type="radio" name="createedit" value="1"> ...plus Create and Edit</label></p>
  </li>
</ul>

What I need to do is when a user checks/unchecks the permission_check input, then it should show/hide the radio_option elements for that list item.

Answer 1

$('.permission_check').change(function(){
    $(this).closest('li').find('.radio_option').toggle(this.checked);
}).change();

Calling change() will trigger the callback once when the code is loaded to initialize the visibility correctly.

DEMO

Reference: change , closest , find , toggle

Answer 2

$('input[type="checkbox"]').change(function() {
    $(this).closest('li').find('input[type="radio"]').toggle($(this).is(':checked'));
});

Answer 3

something like that:

$('.permission_check').change(function(){
    $(this).parents('li').find('.radio_option').toggle();
});

Answer 4

$(".permission_check").change(function() {
     var $options = $(this).parents("li").find("p.radio_option");
     if ($(this).is(":checked")) {
       $options.show();
     }
     else {
       $options.hide();
     }
}

Answer 5

Add the ID attributes to the radio button and then

Using Javascript, you can do:

function showhideOnClick() {
  if(permission == true)
    document.getElementById("radioControlID").style.display = "none";
  else
    document.getElementById("radioControlID").style.display = "block";
}