如何使用 JavaScript 设置单选按钮状态答案

【问题标题】：How to set radio button status with JavaScript如何使用 JavaScript 设置单选按钮状态
【发布时间】：2012-03-17 14:39:15
【问题描述】：

最好使用哪种方法通过 JavaScript 选择性地将单个或多个单选按钮设置为所需的设置？

【问题讨论】：

@RintoGeorge，您能告诉我们原因吗？
@Starx - jQuery 处理了我最近的皮疹；当然它可以检查单选按钮！
@RintoGeorge，我同意，我也喜欢 jQuery，但这太简单了。我们不需要 jQuery。

标签： javascript html

【解决方案1】：

很简单

radiobtn = document.getElementById("theid");
radiobtn.checked = true;

【讨论】：

甜蜜 - 很好很容易谢谢你。如果我要尝试修改具有顺序 id 的 radio1、radio2 等的单选按钮，那么它可能是...... function check_radio() { for (var i = 1, radiobtn; radiobtn = document.getElementById( "收音机" + i); ++i) radiobtn.checked = true; }
我认为radiobtn.checked 应该收到'checked' 而不是true，虽然我不记得我在哪里读到这个了。
@RafaelBarros，您将 Javascript 属性 .checked 与 xhtml 属性 checked="checked" 混淆了。由于 xhtml 试图与 xml 兼容，因此不允许没有值的属性（与 html 4 或 5 相比，<sometag checked> 是正确的语法）。无论您使用哪种标记语言，Javascript 都是 Javascript，并且在 Javascript 对象中具有很可能是布尔值的属性。实际上，与<input type="radio" /> 关联的DOM 对象有一个属性.checked，它可以是true 或false。
我建议在radiobtn = ...之前添加var以避免它在全局范围内。
如果您使用另一个按钮来激活它，则更简单：只需在激活按钮的输入标签中包含onclick="theid.checked=true"即可。

【解决方案2】：

表格

<form name="teenageMutant">
  <input value="aa" type="radio" name="ninjaTurtles"/>
  <input value="bb" type="radio" name="ninjaTurtles"/>
  <input value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

value="cc" 默认会被选中，如果你去掉“checked”，那么表单第一次加载时就会被选中。

document.teenageMutant.ninjaTurtles[0].checked=true;

现在 value="aa" 被选中。其他单选复选框未选中。

查看实际操作：http://jsfiddle.net/yaArr/

您可以使用表单 ID 和单选按钮 ID 执行相同的操作。这是一个带有 id 的表单。

<form id="lizardPeople" name="teenageMutant">
  <input id="dinosaurs" value="aa" type="radio" name="ninjaTurtles"/>
  <input id="elephant" value="bb" type="radio" name="ninjaTurtles"/>
  <input id="dodoBird" value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

value="cc" 默认勾选。

document.forms["lizardPeople"]["dinosaurs"].checked=true;

现在检查 id="dinosaurs" 的 value="aa"，就像以前一样。

查看实际操作：http://jsfiddle.net/jPfXS/

【讨论】：

【解决方案3】：

原版 Javascript：

yourRadioButton.checked = true;

jQuery:

$('input[name=foo]').prop('checked', true);

或

$("input:checkbox").val() == "true"

【讨论】：

谢谢 - 是的，我已经检查并发现了许多不同的方法。不幸的是，在尝试了几次之后，我并没有取得太大的成功。珍惜你的时间
@vinomarky - 这个想法闪过我的脑海，但我不想给人以恶霸的印象。我实际上并不在乎是否在此处发布可以在其他地方找到的问题。
@vinomarky ：我仍然不明白为什么你删除我的帖子，因为你的 qus 发布了负面点。
@Deepakmahajan：抱歉，不知道你指的是什么。我从来没有删除过任何人的帖子，事实上我什至认为我没有特权这样做，即使我想这样做
这实际上很有趣，因为我确信我已经在 $(...) 部分之后使用了带有 [0]、[1]、[2] 等的第二个 jQuery 方法来执行此操作以前，但是当我刚刚尝试$('input[name=foo]')[0].attr('checked', true); 时，我得到了Object doesn't support this property or method。如果我输入('checked', 'checked')，同样的事情。但是当我将 JavaScript 与 jQuery 选项混合并执行 $('input[name=foo]')[0].checked = true; 时，它设置得很好。奇数。

【解决方案4】：

您也可以显式设置单选按钮的值：

<form name="gendersForm">
  <input type="radio" name="gender" value="M" /> Man
  <input type="radio" name="gender" value="F" /> Woman
</form>

使用以下脚本：

document.gendersForm.gender.value="F";

会自动勾选相应的单选按钮。

看看example on JSFiddle。

【讨论】：

完美运行，直到您在 IE 中尝试它 <.>

【解决方案5】：

/**
 * setCheckedValueOfRadioButtonGroup
 * @param {html input type=radio} vRadioObj 
 * @param {the radiobutton with this value will be checked} vValue 
 */
function setCheckedValueOfRadioButtonGroup(vRadioObj, vValue) {
    var radios = document.getElementsByName(vRadioObj.name);
    for (var j = 0; j < radios.length; j++) {
        if (radios[j].value == vValue) {
            radios[j].checked = true;
            break;
        }
    }
}

【讨论】：

【解决方案6】：

试试

myRadio.checked=true

&lt;input type="radio" id="myRadio"&gt;My radio&lt;br&gt;

【讨论】：

【解决方案7】：

$("#id_of_radiobutton").prop("checked", true);

【讨论】：

【解决方案8】：

我正在文档片段中配置一个单选按钮并尝试使用radiobtn.checked = true;。

那没有用，所以我改用了这个解决方案：

radiobtn.setAttribute("checked", "checked");

【讨论】：

你也可以使用radiobtn.setAttribute("checked", "");来选择它。