jQuery，用于将检查值保留在单选按钮中

Question

I am having two radiobuttons,

<div class="class1">
<span><input name="chk1" type="radio" checked="checked" id="check1"/>Option 1</span>
<span><input name="chk2" type="radio" id="check2"/>Option 2</span>
</div>

Now, i am displaying a hidden div using Jquery when the radio button with an ID check1 is cliked and hiding the same div when the radio button with an ID check2 is clicked, here is the code for that,

$(document).ready(function(){
    $("#check1").click(function(){
                                            $("#detail").slideDown("slow");
    });


    $("#check2").click(function(){ 
                                            $("#detail").slideUp("slow");
    })
}); 

My problem is, when an ID check1 is clicked(Div is displayed now) and the values are posted to the server and while return back to the same page, the div is not getting displayed, even though the option check1 is clicked. Is there any other way to retain the div using attr :checked or something? Appreciate your help...

Answer 1

Check online working demo http://jsfiddle.net/kbsYS/ .. i guess this is what you actually want

Your jquery code is right .. problem is in your HTML you should use same name in radio box

HTML

<div class="class1">
<span><input name="chk1" type="radio" checked="checked" id="check1"/>Option 1</span>
<span><input name="chk1" type="radio" id="check2"/>Option 2</span>
</div>

Answer 2

$(document).ready(function(){
    if ($("#check1:checked").length) {
        $("#detail").slideDown("slow");
    }

    $("#check1").click(function(){
        $("#detail").slideDown("slow");
    });


    $("#check2").click(function(){ 
        $("#detail").slideUp("slow");
    })
});