Question

I have a collection of HTML elements that is structured and hierarchical. When an element is added or removed, I update its sibling elements so that the correct sequence order is reflected in the element attributes. Part of this operation involves updating name attributes on radio buttons.

Due to radio buttons being grouped by name, changing the names results in the “checked” state of the radio button being lost.

For an example of the problem I am encountering, check out http://jsfiddle.net/UNQjU/12/ – check a radio button and then execute the code and you will see that state is lost. I am looking for a workaround that will allow me to maintain the checked state of each radio button while I manipulate the name attribute.

Answer 1

This code works fine in the JS Fiddle example you have. If you change the HTML to:

<input type="radio" name="group1" checked="checked"> Option 1 <br/>
<input type="radio" name="group1"> Option 2 <br/>
<input type="radio" name="group1"> Option 3 <br/>

Then ‘Run’ the fiddle, the checkbox name gets changed and the checkbox remains checked.

Don’t forget about labels

<label for="group1_a">
    <input type="radio" id="group1_a" name="group1" checked="checked">
    Option 1</label><br/>
<label for="group1_b">
    <input type="radio" id="group1_b" name="group1">
    Option 2</label><br/>
<label for="group1_c">
    <input type="radio" id="group1_c" name="group1">
    Option 3</label><br/>