39

いくつかのラジオ ボタンがあり、どのラジオ ボタンが選択されているかに基づいて、さまざまな非表示の 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 を再び非表示にするコードを追加する必要があります。ありがとう！

4

9 に答える 9

47

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

動作するはずです

于 2010-05-05T22:13:45.533 に答える
39

それらを表示する前に非表示にするだけです：

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});
于 2010-05-05T22:14:20.147 に答える
7 
$(document).ready(function(){ 
    $("input[name=group1]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
    }); 
});

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

于 2012-12-14T15:31:34.050 に答える
5 
<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>
于 2013-07-10T11:21:18.643 に答える
4

同じための単純なjqueryソース-

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

もう少し適切にするために、最初のオプションにチェックを追加するだけです-

<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>

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

于 2012-07-06T06:37:05.550 に答える
3

jQueryshow()とhide()メソッドを使用できます。以下のように:

JQuery:

  $(document).ready(function(){
    $('input[type="radio"]').click(function(){
      var val = $(this).attr("value");
      var target = $("." + val);
      $(".msg").not(target).hide();
      $(target).show();
    });
  });

HTML:

<input type="radio" name="color" value="yellow"> Yellow
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green

<div class="yellow msg">You have selected Yellow</div>
<div class="red msg">You have selected Red</div>
<div class="green msg">You have selected Green</div>

例を次に示します。ラジオ ボタンのクリックに基づいて DIV を表示/非表示にする

于 2021-01-14T13:43:56.103 に答える