使用 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()

。

Answer 1

请勿将 CSS/JQuery 语法（

#

用于标识符）与本机 JS 混合。

原生JS解决方案：

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

要同时触发关联事件（例如，如果需要显示/隐藏相关控件），请调用

click()

:

document.getElementById('_1234').click();

JQuery解决方案：

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

Answer 2

如果要设置“1234”按钮，则需要使用其“id”：

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

当您使用浏览器 API（“getElementById”）时，您不使用选择器语法；您只需传递您正在寻找的实际“id”值即可。您可以将选择器语法与 jQuery 或

.querySelector()

和

.querySelectorAll()

一起使用。

Answer 3

今天，2016 年，在不知道 ID 的情况下使用

document.querySelector

是安全的（特别是如果你有超过 2 个单选按钮）：

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

Answer 4

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

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

这添加了一个新属性“checked”（在 HTML 中不需要值）。 只需记住包含 jQuery 库即可：

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

Answer 5

通过使用

document.getElementById()

函数，您不必在元素的 id 之前传递

#

。

代码：

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

演示： JSFiddle

Answer 6

我能够通过在 Firefox 72 中的 Web 扩展选项页面中使用此 Javascript 代码来选择（选中）单选输入按钮以加载值：

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>

Answer 7

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

我还尝试使用以下方法设置“checked”属性：

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

我知道该属性可以默认设置， 但我只需要在运行时更改选中的属性。

作为解决方法，我找到了另一种可能有效的方法。我调用了单选按钮的

item.click();

方法。并且该控件已被选择。但该控件必须已添加到 HTML 文档中，才能接收单击事件。