2

ラジオボタンがチェックされているときにフィールドを表示するJavaScriptコードがあります。コードは完全に機能しますが、ラジオのチェックを外しても、フィールドは非表示になりません。ラジオボタンがオンになっている場合も表示され<span>ますが、オフになっている場合は、スパンも非表示になりません。

<script>
$(function() {
    $('#radiopromo2').live('change', function() {
        if($(this).is(':checked')) {
            $("#fieldtraining").show();
            $("#radio3").show();
        } else {
            $("#fieldtraining").hide();
            $("#radio3").hide();
        }
    }).trigger('change');
});
</script>

私を助けることができる人はいますか？jsfiddleを作成しましたhttp://jsfiddle.net/4UH2H/8/

4

2 に答える 2

5

より適切な.prop（）を使用してみてください：

if($(this).prop('checked')){

または、単純な古いJavascript（はるかに高速です）：

if(this.checked){

それはいつも私のために働きます。また、.live()は非推奨に.on()なりました。ラジオボタンの場合は、古いWebkitバージョンのバグがonchangeを正しく認識しないため、click代わりに使用することをお勧めします。change

$('#radiopromo2').on('click',function(){

これらの変更により、あなたは金色になるはずです。

編集ここのjsFiddle に基づいて、イベントは正しいセレクターで起動されませんでした。更新されたものは次のとおりです。

$('input[name="radiotraining"]').on('click', function () {
    if ($('#radiopromo2').prop('checked')) {
        $("#fieldtraining").show();
        $("#radio3").show();
    } else {
        $("#fieldtraining").hide();
        $("#radio3").hide();
    }
});

できます！わーい！jsFiddleを見ていますが、このような基本的な表示/非表示には、jQueryの代わりにCSSを使用することを検討する必要があります。

#fieldtraining,#radio3 {
    display:none;
}

#radiopromo2:checked + #radio2 > #radio3 {
    display:inline;
}

#radiopromo2:checked ~ #fieldtraining {
    display:block;
}

IE9 +とすべての実際のブラウザー（CSS3です！）で完全に正常に動作し、JSよりもはるかに高速で、ブラウザーで白髪がJSをオフにしている場合でも動作します。IE6のような古いブラウザ用にjQueryを保存できます。これが私が何を意味するかを示すjsFiddleです。

于 2013-03-22T14:14:47.657 に答える
0 
the behavior of .is() method in jquery is not as expected.Instead of .is() use .attr():
if($(this).attr("checked") == "checked")){
// code goes here
}
于 2013-03-22T14:17:13.437 に答える