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