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()を呼び出すと、可視性を正しく初期化するためにコードがロードされたときにコールバックが1回トリガされます。

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(); 
    } 
}