Question

I’m using JQuery-UI to display radio buttons like here.

I have the following HTML code:

<div id="radioDiv">
    <input type="radio" id="u1-radio" name="radio" value="" checked/>
        <label for="u1-radio">U1</label>
    <input type="radio" id="u2-radio" name="radio" value="" />
        <label for="u2-radio">U2</label>
    <input type="radio" id="g1-radio" name="radio" value="" />
        <label for="g1-radio">G1</label>
</div>

and the following JavaScript:

$(document).ready(function(){
    $("#radioDiv").buttonset();
    getUseCase("u1");
}

function getUseCase(useCase){
    if( useCase == "u1" ){
        $("#u2-radio").checked = false;
        $("#g1-radio").checked = false;
        $("#u1-radio").checked = true;
        $("#radioDiv").buttonset('refresh');
    }
    if( useCase == "u2" ){
        $("#u1-radio").checked = false;
        $("#g1-radio").checked = false;
        $("#u2-radio").checked = true;
        $("#radioDiv").buttonset('refresh');
    }
    if( useCase == "g1" ){
        $("#u1-radio").checked = false;
        $("#u2-radio").checked = false;
        $("#g1-radio").checked = true;
        $("#radioDiv").buttonset('refresh');
    }
}

Buttons works fine but the problem is when I refresh the page with F5 key: the checked button remains the last so “radioDiv” is not refreshed with the first button checked.

I do not understand why..a refresh is not supposed to recall $(document).ready(function(){})?

Answer 1

to select a radiobutton value, use :

.attr('checked', true); // jQuery < 1.6
.prop('checked', true); // jQuery >= 1.6

instead of

.checked = true;

see my jsFiddle, it works :

http://jsfiddle.net/EPp2N/