web-dev-qa-db-ja.com

jQueryを使用して、ラジオボタンの選択に基づいてdivを表示/非表示にする方法は？

ラジオボタンがいくつかあり、選択したラジオボタンに基づいて異なる非表示のdivを表示したいと思います。 HTMLは次のようになります。

<form name="form1" id="my_form" method="post" action="">
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div>  
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div>  
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div>  
    <input type="submit" value="Submit">
</form>

....

<style type="text/css">
    .desc { display: none; }
</style>

....

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc">consectetur adipisicing</div>
<div id="opt3" class="desc">sed do eiusmod tempor</div>

そして、これが私のjQueryです。

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("#"+test).show();
    }); 
});

私がそのようにやっているのは、ラジオボタンとdivが動的に生成されているためです（ラジオボタンの値には常に対応するdivがあります）。上記のコードは部分的に機能します-正しいボタンがチェックされるとdivが表示されますが、ボタンをオフにするとdivが再び非表示になるようにコードを追加する必要があります。ありがとう！

jqueryradio-buttonmouseclick-event
35
M Thomas

2015/06更新

質問が投稿されてからjQueryが進化したため、現在推奨されるアプローチは_$.on_を使用することです

_$(document).ready(function() {
    $("input[name=group2]").on( "change", function() {

         var test = $(this).val();
         $(".desc").hide();
         $("#"+test).show();
    } );
});
_

または$.ready()の外側

_$(document).on( "change", "input[name=group2]", function() { ... } );
_

元の回答

.change()イベントハンドラを使用する必要があります。

_$(document).ready(function(){ 
    $("input[name=group2]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
    }); 
});
_

動作するはずです

45
Zlatev

表示する前に非表示にします。

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});
39
albertein
$(document).ready(function(){ 
    $("input[name=group1]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
    }); 
});

あたりです input[name=group1]この例では。ただし、コードをありがとう！

7
Ste Yeu
<script type="text/javascript">
$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
    });
 });
</script>
</head>
<body>
<label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label>

<div id="blk-1" class="toHide" style="display:none">

    <form action="success1.html">

        Name1:<input type="text" name="name">
             <input type="submit" name="submit">

    </form>

</div>
<div id="blk-2" class="toHide" style="display:none">

    <form action="success1.html">

        Name2:<input type="text" name="name">
             <input type="submit" name="submit">

    </form>
</div>
5
Rajesh Hatwar

興味深い解決策は、この宣言を作成することです：表示されるすべてのdivに、属性automaticallyVisibleIfIdCheckedに、それが依存するチェックボックスまたはラジオボタンのIDを与えるだけです。つまり、フォームは次のようになります。

<form name="form1" id="my_form" method="post" action="">
    <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div>  
    <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div>  
</form>
....
<div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div>
<div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div>

関数型プログラミングをうまく使用するページに依存しないJavaScriptがいくつかあります。

function executeAutomaticVisibility(name) {
    $("[name="+name+"]:checked").each(function() {
        $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show();
    });
    $("[name="+name+"]:not(:checked)").each(function() {
        $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide();
    });
}

$(document).ready( function() {
    triggers = $("[automaticallyVisibleIfIdChecked]")
        .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() })
    $.unique(triggers);
    triggers.each( function() {
        executeAutomaticVisibility(this.name);
        $(this).change( function(){ executeAutomaticVisibility(this.name); } );
    });
});

同様に、属性automaticallyEnabledIfCheckedを持つフォームフィールドを自動的に有効/無効にすることができます。

このメソッドは、ページに特定のJavaScriptを作成する必要がないので、素晴らしいと思います-何をすべきかを示すいくつかの属性を挿入するだけです。

5
Hans-Peter Störr

同じためのシンプルなjqueryソース-

$("input:radio[name='group1']").click(function() {      
    $('.desc').hide();
    $('#' + $("input:radio[name='group1']:checked").val()).show();
});

それをもう少し適切にするために、最初のオプションにcheckedを追加するだけです-

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>

スタイリングから.descクラスを削除し、次のようにdivを変更します。

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div>
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

とにかく本当によく見えるでしょう。

4
Bharat

以下のコードは私にとって完璧に機能しています：

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});
.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    label{ margin-right: 15px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <label><input type="radio" name="colorRadio" value="red"> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>
        <label><input type="radio" name="colorRadio" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
    <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
0
Pradeep