22

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/

nthChild
  • 679
  • 3
  • 10
  • 19
  • @quentin and others: Your replies are great, does this confirm then that the expected behavior of an _attribute_ "checked" will not automatically update **without the use of Javascript?** – nthChild Jul 25 '13 at 14:48
  • I was able to style the "checked" radio button and label by applying styles using a pseudo selector :checked. This works for IE9+, Chrome and Firefox. http://jsfiddle.net/sXjyL/4/ – nthChild Jul 26 '13 at 01:00
  • A more clear answer as to how to work with radio buttons using jQuery is on SO here: https://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery – qxotk Jan 14 '19 at 21:30

1 Answers1

23

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.

Checked attribute vs checked property

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    Was waiting for that *property* vs *attribute* distinction :) – brbcoding Jul 24 '13 at 14:12
  • @quentin Your replies are great, does this confirm then that the expected behavior of an attribute "checked" will not automatically update without the use of Javascript? – nthChild Jul 25 '13 at 17:57
  • Yes. Only JavaScript can change the checked *attribute* once the page has loaded. – Quentin Jul 25 '13 at 17:59