Please let me know how to open a pop-up on click of a radio button using JQuery. Currently Im using a the following code for a radio button using Spring MVC and JSTL

<label class = "">
 <form:radiobutton path = "" value = "" onchange= ""/>
<label class = "" style = ""> <spring:message code ="" /></label>
</label>

Many Thanks

Please let me know how to open a pop-up on click of a radio button using JQuery. Currently Im using a the following code for a radio button using Spring MVC and JSTL

<label class = "">
 <form:radiobutton path = "" value = "" onchange= ""/>
<label class = "" style = ""> <spring:message code ="" /></label>
</label>

Many Thanks

• javascript
• jquery-ui
• jquery

3 Answers 3

I am assuming you mean a new window by pop-up?

The following code will open a new window with the URL when the status of the radio button changes. You can use click if you like...

$("#pop").change(function() {
    window.open("http://www.google.");
});

<input type="radio" id="pop" value="yes">

JSFiddle Example

I hope this will solve your problem.

onchange= "window.open("http://www.stackoverflow.",width=200,height=100); "/>

EDIT1: Removing the hide class does the trick.

jQuery:

$(document).ready(function () {
    $('input[type="radio"]').click(function () {       
                $('#r').removeClass("hide");
    });
});

HTML:

<input type='radio'>SO
<div id="r" selectOption="#" class="modal hide" tabindex="-1" role="dialog" style=" background-color:#ccc; height: 100px;width: 350px"></div>

EDIT2:

If you check my html code, you will see an id for div named as "r" (unique selector) and class name "hide" prevent the div to be displayed. Therefore the div is hidden.

When the radio button is click, using removeClass we're removing the class "hide" this make the div visible.

Check this JSFiddle

Hope you understand.

you mean like this? CLICK HERE

HTML

<input type='radio' id='myRadio'>Radio button

JQuery

$(document).ready(function()
{
    $('#myRadio').click(function()
    {
        alert("Clicked");
    });
});