In this tutorial we will see, one checkbox allow to be checked using javascript and jquery
HTML checkboxes are used for choosing multiple options from the list and for allow only single selection with HTML radio button.
Occasionally it is needed to use a checkbox rather of a radio for single selection.
In this article, we will show how one checkbox allow selection with jQuery and JavaScript.
1. Using jQuery
HTML
Generate multiple checkboxes and add class="checkoption" to every checkboxes.
jQuery
- Specify
clickevent oncheckoptionclass. - Fixed all checkboxes
checkedattribute tofalseExcept 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>
2. Using JavaScript
HTML
Generate multiple checkboxes and add class="checkoption" to every checkboxes. Specify onclick event to the checkboxes that calls checkedOnClick(this);.
JavaScript
- Generate
checkedOnClick()function. - Select all checkboxes where
class="checkoption"and assign tocheckboxesListvariable. - Loop on
checkboxesListand setcheckedattribute isfalse. - Fixed clicked checkbox
checkedattribute istrue.
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>
Also Read: How to show progress File Upload in Ajax using jQuery
0 Comments