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

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

Answer 3

添加了ID屬性的單選按鈕，然後

使用JavaScript，你可以這樣做：

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

Answer 4

類似的東西：上

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

Answer 5

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