Radio Button "Checked=checked" not changing when option changed
checked, css, forms, html, input
Solution
The `checked` attribute specifies the default checked radio button, not the currently checked one.
See this example code:
function setChecked() {
document.getElementById('x1').removeAttribute('checked');
document.getElementById('x2').setAttribute('checked', 'checked');
}
document.querySelector('[type=button]').addEventListener('click', setChecked);
<form>
<input name="x" type="radio" id="x1" checked>
<input name="x" type="radio" id="x2">
<button type="button">Switch</button>
<button type="reset">Reset</button>
</form>
Click the second radio button, then click Reset. Then click the second radio button again, then Switch, then Reset.
The checked property will give the current checked state of a radio button.
Problem
I've created a basic 2 radio button form as seen in my example below. Observing the browser rendering, we see item 1 selected. We inspect item 1 and 2. When I click item 2, I expect item 1's checked=checked to be remove. I expect item 2 receive the attribute checked=checked. Is this not the expected behavior? ``` <div> <span>Item 1</span> <input type="radio" name="radio1" id="radio1" checked="checked" /> </div> <div> <span>Item 2</span> <input type="radio" name="radio1" class="checkbox" id="radio2" /> </div> ``` http://jsfiddle.net/chrimbus/ZTE7R/1/