JQuery: Как бы я показать / скрыть эти элементы?

Question

Вот мой 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>

Что мне нужно сделать, это когда пользователь проверяет / снимает отметку с ввода permission_check, тогда он должен показывать / скрывать элементы radio_option для этого элемента списка.

Answer 1

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

Вызов change() вызовет обратный вызов один раз при загрузке кода для правильной инициализации видимости.

DEMO

Ссылка: change, closest, find, toggle

Answer 2

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

Answer 3

что-то в этом роде:

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

Answer 4

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

Answer 5

Добавьте атрибуты ID к переключателю, а затем

Используя Javascript, вы можете сделать:

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