Question

我希望在选择按钮时显示/隐藏单选按钮内容，但我需要默认按钮（比如第一个）作为默认按钮（并显示内容），然后显示隐藏内容。

目前，默认情况下它们都隐藏在类上的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();
}); 
});

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

jquery显示/隐藏单选按钮内容（默认选择必须显示内容）

1 个答案: