CODEWITHSUNDEEP
jquery
user763460
user763460

Reputation: 221

jquery show/hide radio button content (default selection must show content)

I'm looking to show/hide radio button content upon selecting a button but I need a default button (say 1st one) to be the default (and show content) then show hide content from there.

Currently, they are all hidden by default with display:none on the class. Here is the 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>

And here is the jquery:

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

Upvotes: 0

Views: 2227

Answers (1)

wirey00
wirey00

Reputation: 33661

trigger change on dom ready for your checked element

$(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/

Upvotes: 1

Related Questions