jQuery selector mistake

Question

I was using jQuery UI Dialog and jQuery to select a "radio" button.

I have 2 dialog, one for "calculator", another for "expert_mode".

However, when I select a 'input[value="simple"]' under calculator, it also affects an input under expert_mode with the same name, how to fix that??

Followings are my codes:

This is my HTML (simplified):

<div name="widget">
    <div name="calculator">
        <input name="mode" value="a" type="radio" **checked="checked"**/>
        <input name="mode" value="b" type="radio"/>
        <input name="mode" value="c" type="radio"/>
    </div>
    <div name="expert">
        <input name="mode" value="simple" type="radio"/>
        <input name="mode" value="advanced" type="radio"/>
        <input name="mode" value="custom" type="radio"/>
    </div>
</div>

And the JavaScript:

var widget=$('div[name="widget"]');
var calculator=widget.find('div[name="calculator"]');
var expert=widget.find('div[name="expert"]');

calculator.dialog();
expert.dialog();

Then, when I do this:

expert.find('input[value="simple"]').attr('checked',true);

It becomes:

<div name="widget">
    <div name="calculator">
        <input name="mode" value="a" type="radio"/> ***Here, "checked" disappear!!***
        <input name="mode" value="b" type="radio"/>
        <input name="mode" value="c" type="radio"/>
    </div>
    <div name="expert">
        <input name="mode" value="simple" type="radio" checked="checked"/>
        <input name="mode" value="advanced" type="radio"/>
        <input name="mode" value="custom" type="radio"/>
    </div>
</div>

Answer 1

The problem is the name of your input elements, not your jQuery. As all of the radio buttons have the same name, they are treated as one group, and only one radio button can be checked per group. You will have to change the name of one set of radio buttons, for example (simplified):

<div name="calculator">
    <input name="mode" value="a" type="radio"/>
</div>
<div name="expert">
    <input name="expertMode" value="simple" type="radio" checked="checked"/>
</div>