I have the following radio buttons which share the same name :
<div id="main_div">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio1">
<input type="radio" id="radio1" class="mdl-radio__button" name="somename" value="1" checked>
<span class="mdl-radio__label">Radio 1</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio2">
<input type="radio" id="radio2" class="mdl-radio__button" name="somename" value="2">
<span class="mdl-radio__label">Radio 2</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio3">
<input type="radio" id="radio3" class="mdl-radio__button" name="somename" value="3">
<span class="mdl-radio__label">Radio 3</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio4">
<input type="radio" id="radio4" class="mdl-radio__button" name="somename" value="4">
<span class="mdl-radio__label">Radio 4</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio5">
<input type="radio" id="radio5" class="mdl-radio__button" name="somename" value="5">
<span class="mdl-radio__label">Radio 5</span>
</label>
</div>
I can't make a fidle of it beacause, I need to change the page and go back.
When I check for example the radio radio3 and go the next page using a link and then click on the browser to go back. My radio radio3 button is still checked but I gave by default the radio1 the attribute checked so I think the radio1 should be checked.
I saw in the label in the radio3 the following class is-checked but the input isn't checked.
I'm using material design lite (https://getmdl.io/)
You can prevent the browser from "remembering" the state of your radio buttons by adding autocomplete="off" to your <input> elements. This should make your page show the first radio as checked each time.
<input type="radio" value="xxx" autocomplete="off">