Select one single CheckBox from multiple CheckBoxes in JavaScript

In this article I will explain with an example, how to select one (single) CheckBox from multiple CheckBoxes in JavaScript.

By default, multiple CheckBoxes are meant for multiple selection, thus in order to make it work as Single selection i.e. similar to that of a RadioButtons, JavaScript needs to be used to achieve the same.

HTML Markup

The following HTML Markup consists of an HTML Table containing some CheckBoxes.

<tr>

<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>

</tr>

<tr>

<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>

</tr>

<tr>

<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>

</tr>

<tr>

<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>

</tr>

<tr>

<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>

</tr>

</table>

JavaScript function to select one (single) CheckBox from multiple CheckBoxes

Inside the JavaScript window onload event handler, first the HTML Table is referenced and then all the CheckBoxes inside it are referenced.

Then a loop is executed over the CheckBoxes and Click event handler is attached.

Inside the Click event handler, a check is made to make sure whether the clicked CheckBox is checked and if it is checked then all the other CheckBoxes are unchecked.

window.onload = function () {

var tblFruits = document.getElementById("tblFruits");

var chks = tblFruits.getElementsByTagName("INPUT");

for (var i = 0; i < chks.length; i++) {

chks[i].onclick = function () {

for (var i = 0; i < chks.length; i++) {

if (chks[i] != this && this.checked) {

chks[i].checked = false;

}

};

}

};