0

ボタンを選択したときにラジオボタンのコンテンツを表示/非表示にしたいと思っていますが、デフォルトのボタン（たとえば最初のボタン）をデフォルト（およびコンテンツの表示）にして、そこから非表示のコンテンツを表示する必要があります。

現在、これらはすべてデフォルトで非表示になっており、クラスではdisplay：noneが使用されています。HTMLは次のとおりです。

<div style="float:left; width:300px;">
<div style="float:left;">
<form name="form1" id="my_form" method="post" action="">
  <div>
    <label>
    <input type="radio" name="group1" value="opt1" checked="checked" />
    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>
</div>
<div style="float:right; width:200px;">
<div id="opt1" class="desc">
  <form>
    First name:
    <input type="text" name="FirstName" value="Mickey" />
    <br />
    Last name:
    <input type="text" name="LastName" value="Mouse" />
    <br />
  </form>
</div>
<div id="opt2" class="desc">
  <form>
    <input type="checkbox" name="vehicle" value="Bike" />
    I have a bike<br />
    <input type="checkbox" name="vehicle" value="Car" />
    I have a car
  </form>
</div>
<div id="opt3" class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis commodo euismod. Morbi vitae libero erat, quis ultrices purus.</div>
</div>
</div>

そしてここにjqueryがあります：

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

1 に答える 1

1

チェックされた要素の準備ができているdomで変更をトリガーします

$(document).ready(function() {

    $("input[name$=group1]").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#" + test).show();
    });
    $("input[name$=group1]:checked").change(); // <-- here
});​

http://jsfiddle.net/8hU6K/2/

于 2012-08-29T16:17:48.370 に答える