Capturing RadioButton click and taking action

Question

I have 3 radiobutton on my page. There are 3 buttons also on the same page. i want to show different buttons when each is clicked.

<input id="Radio1" type="radio" name="grp1" class="abc" />
<input id="Radio2" type="radio" name="grp1" class="abc" />
<input id="Radio3" type="radio" name="grp1" class="abc" />

Update: There is only one button to be shown corresponding to each radio button..For eg: If Radio1 is clicked show Button 1, if Radio 2 is clicked show Button 2 and so on

Answer 1

Are you trying

Click()

or maybe

change()

should work :)

Answer 2

$(function() { // at dom ready
  $('input.abc').change(function() { // on radio's change event
    $('.buttons-to-hide-class').hide(); // hide buttons
    $('#button-to-show-id').show(); // show desired button
  });
});

Answer 3

$('#Radio1').click(function() { $('#button1').value = 'new value'; });

something like that

Answer 4

I think what Nicky De Maeyer is suggesting is better, and I'm sure there is a better way to code this way, but:

Script

$(function() {
    //hide all the buttons when the page loads
    $('.def').hide(); 
    //add an onchange function to each radiobutton
    $('input.abc').change(function() { 
        //hide all the other buttons
        $('.def').hide(); 
        //construct the ID of the button to show and show it
        $('#' + this.id + '-Button').show()
        });
    });

HTML

<input id="Radio1" type="radio" name="grp1" class="abc" />
<input id="Radio2" type="radio" name="grp1" class="abc" />
<input id="Radio3" type="radio" name="grp1" class="abc" />

<input id="Radio1-Button" type="button" value="1" class="def" ></input>
<input id="Radio2-Button" type="button" value="2" class="def" ></input>
<input id="Radio3-Button" type="button" value="3" class="def" ></input>