javascript - 单选按钮 html 缺少 checked 属性，尽管 Firebug 指示它已被选中

Question

问题陈述总结:单选按钮html在浏览器上不显示checked属性，但是Firebug提示radio的checked属性设置为checked。

测试于

浏览器:FF 3.6.18 和 IE8
jQuery: 1.5
MVC3( Razor )

详情

使用 MVC3(带 Razor)我从服务器呈现以下单选按钮。所需的功能是在检查一个 radio 时，应取消检查另一个 radio ，反之亦然。换句话说，用户只能选择一个选项 - 比如 val1 或 val2。

<div id="myRadioList">
    <div>
        <input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
        
    </div>
    <div>
        <input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
    </div>
</div>

我观察到的是，如果用户切换所选单选按钮，新选择的单选按钮(比方说 myRadioName_val2)显示为使用 firebug 检查，但 html 仍然反射(reflect)另一个单选按钮如检查。因此，其他一些验证失败。

我试过从字面上删除两个单选按钮的所有选中属性，然后只检查单击的那个。

这就是我正在做的设置当前点击的 radio ，但它不起作用:

$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');

我正在简化我的代码以避免发布不必要的细节。

Answer 1

HTML 中的checked 属性是默认值。JavaScript 中的 checked 属性指的是单选按钮的当前状态。

一般情况下，最好让浏览器来处理单选按钮和复选框的checked状态，而不是自己设置，否则会遇到这类问题。如前所述，通过 prop("checked") 或通过 .is(":checked") 获取当前状态是安全的。

您可能还想考虑使用像 $('#myRadioList').find('input[value="myRadioName_val2"]') 或更好的语法，$(' #myRadioName_val2')，因为 jQuery 中的子选择器可能相当慢，因为它们是从右到左读取的。