How to show the selected checkbox as checked in the popup by second click?

JavaScript
1

Hello friends,

I have a div as well as button. That div contains no of radio buttons. Initiallly that div will not be shown(display:none).when i click the button, i have to show the div content inside the popup. i am able to select the radio options inside the popup. When i click the button in second time, the checked radio option has to persist. But, the selected radio option selection is not showing. Whenever the button is clicked i will get the values from the div. Please help me to rectify this…

EX:

<input type="button" value="ShowColors" id="show_colors" />
<input type="button" value="ShowFlowers" id="show_flowers" />

<div id="colors_div" style="display:none">
<input type="radio" name="colors">red
<input type="radio" name="colors">green
<input type="radio" name="colors">blue
</div>

<div id="flowers_div" style="display:none">
<input type="radio" name="flowers">Rose
<input type="radio" name="flowers">Lily
<input type="radio" name="flowers">Sun flower
</div>

<div id="popup_div"></div>



//Script code here


jQuery('#show_colors').click(function(){

 jQuery('#popup_div').html( jQuery('#colors_div').html());

});

jQuery('#show_flowers').click(function(){

 jQuery('#popup_div').html( jQuery('#flowers_div').html());

});

Thanks in Advance…

Please help me!!!

2

Hi,

jQuery('#show_colors').click(function(){

 jQuery('#popup_div').html( jQuery('#colors_div').html());

});

Every time a user clicks to show the popup, you’re copying the HTML from the hidden div into the popup container, replacing what was previously there (and so resetting the form state).

Rather than having one popup container and swapping the contents, just make each popup a separate container and simply show/hide as necessary.