用javascript检查单选按钮

IT技术 javascript html radio-button
2021-02-06 15:22:07

出于某种原因，我似乎无法弄清楚这一点。

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

6个回答

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

原生JS解决方案：

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

jQuery 解决方案：

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

比 .attr("checked", "checked")
2021-03-26 15:22:07
@Andy - Sizzle 从 2006 年初开始在 jQuery 中使用。（en.wikipedia.org/wiki/JQuery#History）。querySelector直到 2009 年才在浏览器中发布，直到之后的一段时间才被开发人员广泛使用。我从来没有使用过 jQuery，但它对 JS 的发展产生了重大影响。
2021-03-28 15:22:07
这会设置复选框，但不一定会触发关联的事件。当用户单击单选按钮时会触发什么事件？
2021-04-01 15:22:07
从技术上讲，它是 CSS 选择器语法。jQuery 只是借用并扩展了它
2021-04-09 15:22:07
jQuery 从querySelector我想象中得到它。
2021-04-10 15:22:07

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

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

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

@NadeemGorsi “id”属性不能被多个元素共享。所有“id”值在给定页面上必须是唯一的。
2021-03-18 15:22:07
每个人都通过 ID 获取元素 我有多个同名的单选按钮。我认为这就是大多数人需要按名称选择一组收音机，然后根据value检查其中一个。
2021-03-30 15:22:07

今天，在 2016 年，可以在document.querySelector不知道 ID 的情况下使用保存（特别是如果您有 2 个以上的单选按钮）：

document.querySelector("input[name=main-categories]:checked").value
@NadeemGorsi 我提供了使用 QuerySelector 选择或“检查”单选按钮的答案
2021-03-15 15:22:07
好的，但是我怎样才能获得相反的效果或根据value检查收音机..实际上这就是问题所在。
2021-03-22 15:22:07

最简单的方法可能是使用 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>
要不就 $("#_1234").prop("checked", true)
2021-03-31 15:22:07

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

代码：

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

演示： JSFiddle

其它你可能感兴趣的问题
上一篇jquery克隆表单字段并增加id 下一篇使用 jQuery 拖放防止单击事件