In this article I will explain with an example, how to select one (single) CheckBox from multiple CheckBoxes using jQuery.
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, jQuery needs to be used to achieve the same.
HTML Markup
The following HTML Markup consists of an HTML Table containing some CheckBoxes.
<table id="tblFruits">
<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>
Implementing single CheckBox selection from multiple CheckBoxes using jQuery
Inside the jQuery document ready event handler, a Click event handler is attached to all the CheckBoxes inside the HTML Table.
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.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#tblFruits input[type=checkbox]").click(function () {
if ($(this).is(":checked")) {
$("#tblFruits input[type=checkbox]").removeAttr("checked");
$(this).attr("checked", "checked");
}
});
});
</script>
Screenshot
![Select one (single) CheckBox from multiple CheckBoxes using jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
