I have two set of radio button in my html form and I am displaying a hidden div depends upon the radio button selection.And the hidden div ONLY display if both radio buttons are clicked.I am using a jquery to trigger click if the radio buttons are clicked

But when ever I load the page, the buttons are getting checked as expected and it not triggering the click event. due to which a user has to check the radio buttons again(eventhough they are selected).

My html code for radio buttons:

<div class="block">
<input onClick="show_seq_lunid();" type="radio" name="button1" value="Yes" <?php if(!isset($_POST['button1']) || (isset($_POST['button1']) && $_POST['button1'] == 'Yes')) echo ' checked="checked"'?> checked /><label>Yes</label> 
<input onClick="show_list_lunid();" type="radio" name="button1" value="No" <?php if(isset($_POST['button1']) && $_POST['button1'] == 'No')  echo ' checked="checked"';?> /><label>No</label>
</div>  

<div class="block">
<input onClick="os_others();" type="radio" name="button2" value="Yes" <?php if(!isset($_POST['button2']) || (isset($_POST['button2']) && $_POST['button2'] == 'Yes')) echo ' checked="checked"'?> checked /><label>Others</label>   
<input onClick="os_hpux();" type="radio" name="button2" value="No" <?php if(isset($_POST['button2']) && $_POST['button2'] == 'No')  echo ' checked="checked"';?> /><label>HP-UNIX</label>
</div>

And I tried below code to trigger click event for a checked radio button

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

but it is not working. How can I trigger the click event ?

Update: Tried in DOM ready mode using code below, but no luck

$(document).ready(function() {
$('input:radio[name=button1]:checked').click();
$('input:radio[name=button2]:checked').click();
});

I have two set of radio button in my html form and I am displaying a hidden div depends upon the radio button selection.And the hidden div ONLY display if both radio buttons are clicked.I am using a jquery to trigger click if the radio buttons are clicked

But when ever I load the page, the buttons are getting checked as expected and it not triggering the click event. due to which a user has to check the radio buttons again(eventhough they are selected).

My html code for radio buttons:

<div class="block">
<input onClick="show_seq_lunid();" type="radio" name="button1" value="Yes" <?php if(!isset($_POST['button1']) || (isset($_POST['button1']) && $_POST['button1'] == 'Yes')) echo ' checked="checked"'?> checked /><label>Yes</label> 
<input onClick="show_list_lunid();" type="radio" name="button1" value="No" <?php if(isset($_POST['button1']) && $_POST['button1'] == 'No')  echo ' checked="checked"';?> /><label>No</label>
</div>  

<div class="block">
<input onClick="os_others();" type="radio" name="button2" value="Yes" <?php if(!isset($_POST['button2']) || (isset($_POST['button2']) && $_POST['button2'] == 'Yes')) echo ' checked="checked"'?> checked /><label>Others</label>   
<input onClick="os_hpux();" type="radio" name="button2" value="No" <?php if(isset($_POST['button2']) && $_POST['button2'] == 'No')  echo ' checked="checked"';?> /><label>HP-UNIX</label>
</div>

And I tried below code to trigger click event for a checked radio button

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

but it is not working. How can I trigger the click event ?

Update: Tried in DOM ready mode using code below, but no luck

$(document).ready(function() {
$('input:radio[name=button1]:checked').click();
$('input:radio[name=button2]:checked').click();
});

• javascript
• php
• jquery
• html
• radio-button

Share Improve this question Follow edited Oct 2, 2013 at 14:06 acr asked Oct 2, 2013 at 13:54 acracr 1,7461111 gold badges4949 silver badges8383 bronze badges 8

• Try trigger('click'); instead of click();. – Ben Fortune Commented Oct 2, 2013 at 13:56
• 2 @BenFortune Calling .click() without any arguments is a shorthand for calling .trigger('click');. – Anthony Grist Commented Oct 2, 2013 at 13:58
• Where is the script located in the page? If it's at the top (before the HTML for the elements) you need to delay its execution until the DOM is ready: $(document).ready(function() {// your code here}); – Anthony Grist Commented Oct 2, 2013 at 13:59
• did you add the script in dom ready hadnler – Arun P Johny Commented Oct 2, 2013 at 13:59
• I tried in dom ready mode..But it still not working – acr Commented Oct 2, 2013 at 14:04

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 2

http://jsfiddle/tVRrb/

if($('input[name="button1"]').is(':checked')){
    alert('1 is checked');
}

if($('input[name="button2"]').is(':checked')){
    alert('2 is checked');
}

The above works, but I noticed that jsfiddle doesnt like function calls in the onClick attribute. The below worked in my browser but not on jsfiddle. It doesnt see the function being defined somehow.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery./jquery-1.9.1.min.js"></script>
</head>
<body>

<div class="block">
<input onClick="myOtherAlert();" type="radio" name="button1" value="Yes" checked /><label>Yes</label>
<input onClick="myOtherAlert();" type="radio" name="button1" value="No" /><label>No</label>
</div>

<div class="block">
<input onClick="myAlert();" type="radio" name="button2" value="Yes" checked /><label>Others</label>
<input onClick="myAlert();" type="radio" name="button2" value="No" /><label>HP-UNIX</label>
</div>


<script>
if($('input[name="button1"]').is(':checked')){
    $('input[name="button1"]:checked').trigger('click');
}

if($('input[name="button2"]').is(':checked')){
    $('input[name="button2"]:checked').trigger('click');
}

function myAlert(){
    alert('it worked');
}
function myOtherAlert(){
    alert('see');
}
</script>
</body>
</html>