Allow Only One Checkbox to be Checked using jQuery and JavaScript
Allow Only One Checkbox to be Checked using jQuery and JavaScript
Published Aug 27,2022 by Kailash Singh
0 Comment 2468 Views
In this tutorial, we are going to teach you, how to create Allow Only One Checkbox to be Checked using jQuery and JavaScript.
HTML checkboxes are used for picking multiple items from the list and for allowing a single selection HTML radio button to be used.
Sometimes it is required to use a checkbox instead of a radio for a single selection.
In this tutorial, I show how you can allow only one checkbox selection using jQuery and JavaScript.
1. Using JavaScript
HTML
Create multiple checkboxes and add class="checkoption" to all checkboxes. Define onclick event on the checkboxes that calls checkedOnClick(this);.
JavaScript
- Create checkedOnClick() function.
- Select all checkboxes where class="checkoption" and assign to checkboxesList variable.
- Loop on checkboxesList and set checked attribute to false.
- Set clicked checkbox checked attribute to true.
Completed Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allow Only One Checkbox to be Checked using jQuery and JavaScript</title>
</head>
<body>
<input type="checkbox" class="checkoption" value="1" onclick="checkedOnClick(this);"> Option1 <br>
<input type="checkbox" class="checkoption" value="2" onclick="checkedOnClick(this);"> Option2 <br>
<input type="checkbox" class="checkoption" value="3" onclick="checkedOnClick(this);"> Option3 <br>
<input type="checkbox" class="checkoption" value="4" onclick="checkedOnClick(this);"> Option4 <br>
<input type="checkbox" class="checkoption" value="5" onclick="checkedOnClick(this);"> Option5 <br>
<!-- Script -->
<script type="text/javascript">
function checkedOnClick(el){
// Select all checkboxes by class
var checkboxesList = document.getElementsByClassName("checkoption");
for (var i = 0; i < checkboxesList.length; i++) {
checkboxesList.item(i).checked = false; // Uncheck all checkboxes
}
el.checked = true; // Checked clicked checkbox
}
</script>
</body>
</html>
2. Using jQuery
HTML
Create multiple checkboxes and add class="checkoption" to all checkboxes.
jQuery
- Define click event on checkoption class.
- Set all checkboxes checked attribute to false except the clicked checkbox.
Completed Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allow Only One Checkbox to be Checked using jQuery and JavaScript</title>
</head>
<body>
<input type="checkbox" class="checkoption" value="1" onclick="checkedOnClick(this);"> Option1 <br>
<input type="checkbox" class="checkoption" value="2" onclick="checkedOnClick(this);"> Option2 <br>
<input type="checkbox" class="checkoption" value="3" onclick="checkedOnClick(this);"> Option3 <br>
<input type="checkbox" class="checkoption" value="4" onclick="checkedOnClick(this);"> Option4 <br>
<input type="checkbox" class="checkoption" value="5" onclick="checkedOnClick(this);"> Option5 <br>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.checkoption').click(function() {
$('.checkoption').not(this).prop('checked', false);
});
});
</script>
</body>
</html>
Comments ( 0 )
Elevenstech Web Tutorials
Elevenstech Web Tutorials helps you learn coding skills and enhance your skills you want.
As part of Elevenstech's Blog, Elevenstech Web Tutorials contributes to our mission of “helping people learn coding online”.
Read More
Newsletter
Subscribe to get the latest updates from Elevenstech Web Tutorials and stay up to date