仅使用javascript将第一个单选按钮检查为默认设置

Question

<input id="a" type="radio" name="radioButton">
<input id="b" type="radio" name="radioButton">
<input id="c" type="radio" name="radioButton">
<input id="d" type="radio" name="radioButton">

Lets say I have four radio buttons and how do I make the first-child to be checked as default by using just javascript, no jQuery please.

This is what I have done but did not work. Thanks in advance.

document.querySelectorAll('[name=radioButon]:first-child').checked = true; 

Answer 1

The reason your example wasn't working was because .querySelectorAll() returns a NodeList of elements . You would need to iterate over each element in the list in order to set the checked property to true :

Example Here

var elements = document.querySelectorAll('[name=radioButton]:first-child');
Array.prototype.forEach.call(elements, function(el) { el.checked = true; });

---

Alternatively, you could also access the first matching element:

Example Here

document.querySelectorAll('[name=radioButton]')[0].checked = true;
// or..
document.querySelector('[name=radioButton]').checked = true;

---

_{As a side note, you also had a typo.}

^{The attribute selector [name=radioButon] should have been [name=radioButton] .}