使用JavaScript选中单选按钮

Question

由于某种原因，我似乎无法弄清楚这个问题。

我在HTML中有一些单选按钮，用于切换类别：

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

用户可以选择任何一个单选按钮，但当某个特定事件触发时，我想将 1234 设置为默认选中的单选按钮。

我尝试了以下版本（使用或不使用 jQuery）： document.getElementById('#_1234').checked = true; 但它似乎没有更新。我需要它在可见上更新，以便用户可以看到它。 有人能帮忙吗？

编辑：我只是疲倦了，忽略了 #，感谢指出，还有 $.prop()。

- ptf

---

请查看这个 StackOverflow 的问题：如何使用 jQuery 检查单选按钮 - Mandy Schoep

将其翻译为中文：将 document.getElementById('_1234').checked = true; 更改为这样。 - stackErr

@stackErr 不要加上 # 符号 - Tim Seguine

对不起，刚才复制粘贴错误了，已经更新了。@FelipeKM 请帮帮我，我还没有找到能够帮助我的方法。 - ptf

@kjelelokk请查看我的评论或Pointys的答案。 - stackErr

你想通过错误的ID选择一个元素吗？在“_1234”前面删除这个“#”，使用jQuery的查询选择器如下：$('#_1234')。 - felipekm

Answer 1

不要在原生JS中混用CSS/JQuery语法（使用#选择器来选取元素）。

原生JS解决方案：

document.getElementById("_1234").checked = true;

JQuery解决方案：

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

- zavg

---

从技术上讲，这是CSS选择器语法。jQuery只是借用并扩展了它。 - Tim Seguine

我可以想象，jQuery从querySelector获取了它。 - Andy

比起 .attr("checked", "checked") 好得多。 - ma77c

@Andy - Sizzle从2006年初开始就被用于jQuery。(https://en.wikipedia.org/wiki/JQuery#History)。直到2009年，`querySelector`才被浏览器支持，并且在此之后一段时间内才被开发人员广泛使用。我并没有经常使用jQuery，但它对JS的演变产生了重大影响。 - Rounin

这会设置复选框，但不一定会触发相关事件。当用户单击单选按钮时，会触发哪个事件？ - robisrob

@robisrob 是的，因为这只是更改单选按钮的“checked”属性，而不执行“click”，“change”或任何其他事件。如果您使用checkboxSelector.click()，那就是您触发点击事件的地方。 - undefined

Answer 2

如果你想设置 "1234" 按钮，你需要使用它的 "id"：

document.getElementById("_1234").checked = true;

当您使用浏览器API（"getElementById"）时，不使用选择器语法； 您只需传递要查找的实际“id”值。 您可以在jQuery或.querySelector()和.querySelectorAll()中使用选择器语法。

- Pointy

---

每个人都在通过ID获取元素，但我有多个具有相同名称的单选按钮。我认为大多数人需要按名称选择一组单选按钮，然后根据值选中其中一个。 - TechNerdXp

@NadeemGorsi，“id”属性不能被多个元素共享。所有“id”值在给定页面上必须是唯一的。 - Pointy

Answer 3

现在，已经是2016年了，使用 document.querySelector 是安全的，即使你不知道ID（特别是当你有超过2个单选按钮时）：

document.querySelector("input[name=main-categories]:checked").value

- StanE

---

好的，但是我该如何获得相反的效果或根据值检查无线电..实际上这就是问题所在。 - TechNerdXp

@NadeemGorsi 我提供了使用QuerySelector选择或“选中”单选按钮的答案。 - Kevin

TechNerdXp 试试按值而不是名称进行选择。document.querySelector('input[value="xyz"]) - undefined

Answer 4

最简单的方法可能是使用jQuery，如下所示：

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

这会添加一个新的属性“checked”（HTML中不需要值）。只需记得包含jQuery库即可： ```html ```

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

- Esser

---

或者只需使用 $("#_1234").prop("checked", true)。 - undefined

Answer 5

使用document.getElementById()函数时，您不需要在元素ID之前添加#。

代码：

document.getElementById('_1234').checked = true;

演示: JSFiddle

- Daniel Kmak

Answer 6

我能够使用以下Javascript代码在Firefox 72中选择（勾选）一个单选框，用于在Web扩展选项页中加载值：

var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

将值保存的相关代码在哪里：

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

考虑到以下HTML：

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>

- Kevin

Answer 7

在Internet Explorer中或一些较旧的浏览器中，似乎无法使用JavaScript更改HTML单选按钮的item.checked属性。

我还尝试使用“checked”属性进行设置，如下所示： item.setAttribute("checked", ""); 我知道该属性可以默认设置， 但我只需要在运行时更改已选属性。

作为解决方法，我找到了另一种可能有效的方法。我调用了单选按钮的item.click(); 方法。然后控件就被选中了。但是，该控件必须已添加到HTML文档中，以接收点击事件。

- Adrian Brinas

---

Adrian提供了很好的细节，但我认为原帖发布者的问题更简单，只是一个错误放置了“#”符号 :) - Dave Potts

谢谢提供item.click()的提示。 - bgrand-ch