May 11, 2024 | HTML
Hello Dev,
If you require the functionality to select only one checkbox at a time among multiple checkboxes, you can achieve this easily using jQuery. By utilizing the `prop()` method, you can set the `checked` attribute to true or false.
Suppose you have a group of checkboxes, and you want to enable the selection of only one checkbox at a time using jQuery. In the following example, you can see how this can be accomplished. This code snippet allows you to implement the selection of one checkbox at a time.
To ensure that only one checkbox can be selected at a time among a group of checkboxes, you can use jQuery to manage the checked state of each checkbox. When a checkbox is clicked, you can programmatically uncheck all other checkboxes in the group. Here's how you can implement this:
Read Also: Select Deselect All Checkboxes Using Jquery Example Tutorial index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How To Make Checkboxes Like a Radiobuttons in Jquery? -- ItErrorSolution.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>How To Make Checkboxes Like a Radiobuttons in Jquery? -- ItErrorSolution.com</h1>
<!-- Group of checkboxes -->
<input type="checkbox" class="single-selection" name="option1" value="Option 1" />
<label for="option1">Option 1</label><br />
<input type="checkbox" class="single-selection" name="option2" value="Option 2" />
<label for="option2">Option 2</label><br />
<input type="checkbox" class="single-selection" name="option3" value="Option 3" />
<label for="option3">Option 3</label><br />
<script>
$(document).ready(function() {
// Function to handle checkbox click
$('.single-selection').click(function() {
// Uncheck all other checkboxes in the group
$('.single-selection').not(this).prop('checked', false);
});
});
</script>
</body>
</html>
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"