Updated February 21, 2023
Definition on jQuery click checkbox
jQuery click checkbox method in jQuery compares the contents of a jQuery object to the contents of a selector. We may bind to an HTML checkbox’s change or click event in various ways using JavaScript and jQuery. We can also use jQuery’s prop method, which returns true if the input checkbox is ticked and false. We can directly access the checked property for the DOM element.
What is the jQuery click checkbox?
- The jQuery prop method can dynamically check or uncheck a checkbox, such as when a button or hyperlink is clicked.
- The jQuery prop method is a straightforward, effective, and reliable way to determine a checkbox’s current status. Because every checkbox contains a checked attribute that describes whether it is checked or unchecked, it functions well in all circumstances.
How to jQuery click checkbox?
- Checkboxes are one of the many sorts of input fields that we employ to allow users to interact with web pages and often POST data to a backend by checking any box that corresponds to the case.
- Checkboxes in a single group are not mutually exclusive; thus, a user can select numerous boxes that apply, unlike Radio Buttons (which belong to Radio Groups), when checking to see if any options have been selected.
- We can outsource the logic to its function instead of using the built-in checked property. Is method is a broad method that may be used for various reasons, and it produces a true or false value depending on the comparison criteria.
- Attr was used to access and manipulate fields of elements in early versions of jQuery. A prop has replaced the method in subsequent versions.
- On the other hand, Is method always produces a boolean value, whereas the prop only returns the underlying property type.
- We can’t be sure that nothing else got through, and if we don’t utilize prop correctly, our function may fail at runtime.
- The checked selector was created primarily to determine whether or not a radio button or checkbox element has been selected.
- Is method has a little more processing and parsing overhead than a prop. However, the prop is more performant when processing many inputs, such as in a loop, even if it doesn’t merely access the property and does some validation.
- It also indicates the return value of a boolean semantically, making it a more readable option.
The below example shows how to jQuery with click checkbox as follows.
Code:
<!DOCTYPE html>
<html>
<body>
<p> jQuery Check CheckBox </p>
<label for = "myCheck">Checkbox:</label>
<input type="checkbox" id = "myCheck" onclick="myFunction ()">
<p id = "text" style = "display:none">We have clicked on checkbox</p>
<script>
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
} }
</script>
</body>
</html>
jQuery click checkbox element
- In jQuery, we can pick the element, retrieve its underlying object instead of the jQuery object ([0]), and use the built-in checked property to check whether the Checkbox has been checked.
- Check the status of checkboxes with the jQuery-checked selector. Checked is a selector for radio buttons and checkboxes.
- Changing the checked attribute of the input type can be used in two ways to check the currently chosen checkbox dynamically.
- The prop method can access the input and change its properties. For example, this method manipulates the ‘checked’ property, setting it to true or false depending on whether it should be checked or unchecked.
- Attr method is similar to the one above, but it’s better for older jQuery versions. We can access the input and modify its properties using the attr method.
- Whether we want to check or uncheck something, we must change the ‘checked’ property and set it to true or false.
- When setting the attribute to ‘true,’ it is required to provide a click method to ensure that the option in the option group is modified.
The below example shows jQuery click checkbox elements as follows. The below example shows that the yes button checkbox will be selected after clicking on the yes button. After clicking on the no button, the checkbox will be unselected.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title> jQuery click Checkbox </title>
<script src = "https://code.jQuery.com/jQuery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".check").click(function(){
$("#myCheck").prop("checked", true);
});
$(".uncheck").click(function(){
$("#myCheck").prop("checked", false);
});
});
</script>
</head>
<body>
<p><input type="checkbox" id="myCheck"> Are we sure to check and uncheck the checkbox</p>
<button type="button" class="check">Yes</button>
<button type="button" class="uncheck">No</button>
</body>
</html>After clicking on Yes
After clicking on No
jQuery click checkbox examples
Below is the example of the jQuery click checkbox using the prop method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Click Checkbox.
</title>
<script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: red">
jQuery Click Checkbox
</h1>
<b>
jQuery Click Checkbox
</b>
<p>
<input type="checkbox" name="option" id="front">
One
<input type="checkbox" name="option" id="back">
Two
</p>
<p>
<button type="button" class="check-front">
Click on One.
</button>
<button type="button" class="check-back">
Click on Two.
</button>
<button type="button" class="reset">
Reset the Checkbox.
</button>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".check-front").click(function() {
$("#front").prop("checked", true);
});
$(".check-back").click(function() {
$("#back").prop("checked", true);
});
$(".reset").click(function() {
$("#front").prop("checked", false);
$("#back").prop("checked", false);
});
});
</script>
</center>
</body>
</html>
Below is the example of the jQuery click checkbox using the attr method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Click Checkbox.
</title>
<script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: red">
jQuery Click Checkbox
</h1>
<b>
jQuery Click Checkbox
</b>
<p>
<input type="checkbox" name="option" id="front">
One
<input type="checkbox" name="option" id="back">
Two
</p>
<p>
<button type="button" class="check-front">
Click on One.
</button>
<button type="button" class="check-back">
Click on Two.
</button>
<button type="button" class="reset">
Reset the Checkbox.
</button>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".check-front").click(function() {
$("#front").attr("checked", true);
});
$(".check-back").click(function() {
$("#back").attr("checked", true);
});
$(".reset").click(function() {
$("#front").attr("checked", false);
$("#back").attr("checked", false);
});
});
</script>
</center>
</body>
</html>
Conclusion
The checked selector was created primarily to determine whether or not a radio button or checkbox element has been selected. This method in jQuery compares a jQuery object’s contents to a selector’s contents. The prop method requires jQuery version 1.6 or higher.
Recommended Articles
This is a guide to the jQuery click checkbox. Here we discuss the Definition, What is the jQuery click checkbox, and How to jQuery click checkbox with Examples and code implementation. You may also have a look at the following articles to learn more –
