使用JavaScript检查单选按钮

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

我的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()。

不要将CSS / JQuery语法（#用于标识符）与本机JS混合使用。

本机JS解决方案：

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

jQuery解决方案：

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

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

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

使用浏览器API（“ getElementById”）时，不使用选择器语法；您只需传递所需的实际“ id”值即可。您可以将选择器语法与jQuery或.querySelector()和一起使用.querySelectorAll()。

今天，在2016年，document.querySelector无需知道ID 就可以节省使用时间（特别是如果您有两个以上的单选按钮）：

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

最简单的方法可能是使用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>

通过使用document.getElementById()函数，您不必#在元素的id之前传递。

码：

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

演示： JSFiddle

我可以通过在Web Extension选项页面中的Firefox 72中使用以下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>