Radio Button “Checked=checked” not changing when option changed

Question

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/

Answer 1

The checked attribute specifies the default checked radio button, not the currently checked one.

See this example code. 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.