检测选中的单选按钮并触发点击

Question

I have a set of 4 radio buttons, which when clicked show/hide divs on my page.

On unsuccessful validation of my form I return the user back to the form with last clicked radio button checked.

The issue I have is it does not show/hide the divs as in this instance the radio button isnt being clicked.

What I want to be able to do is on page load detect which radio button is checked and then fire a click event. (ie simulate someone clicking that radio button) so that it then shows/hides my divs.

My code to show hide looks like this

$('#showduo').click(function(){
$('div[id^=div]').hide();
$('#div1').show();

html:

<input type="radio" name="type" value="Single" id="hideall" <?php echo set_radio('type', 'Single', TRUE); ?> />
<input type="radio" name="type" value="Singleplus" id="showsingleplus" <?php echo set_radio('type', 'Singleplus'); ?> />
<input type="radio" name="type" value="Duo" id="showduo" <?php echo set_radio('type', 'Duo'); ?> />
<input type="radio" name="type" value="Family" id="showfamily" <?php echo set_radio('type', 'Family'); ?> />

<div id="div1" style="display:none;">

Answer 1

If you call .click() without any parameters on the selected radio button it will execute the click handler for that button, just as if the user clicked on it.

Try:

$('input:radio[name=xxx]:checked').click();

Of course, you have to change "xxx" to the name you gave the radio buttons.

Note: I feel compelled to say that I wouldn't have it so each radio button has its own handler. That means you have to add JavaScript if you want to add another radio button.