使用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;

JQuery解决方案:

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

Answer 2

如果要设置"1234"按钮,则需要使用其"id":

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

当您使用浏览器API("getElementById")时,不使用选择器语法; 你只需传递你正在寻找的实际"id"值.你使用jQuery或.querySelector()和的选择器语法.querySelectorAll().

Answer 3

今天,在2016年,它可以在document.querySelector不知道ID的情况下使用(特别是如果你有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>