In this tut, you will learn how to check if the checkbox is checked or not in jquery.
There are times when we need to change things dynamically especially in the case of when we are sending and getting data using the AJAX and API Calls. The most common encounter we get is with checkboxes and radio buttons.
In this guide, you will learn how to check if the checkbox is checked or not in jquery.
Let’s get started!
Table of Contents
1- Create the checkbox and the label
In this step, I am just creating the checkbox with the name of checkbox_name and the label.
<input type="checkbox" name="checkbox_name">
<label>Checkbox value</label>2- Include the jquery
Now will include jquery after the bodytag
<html>
<body>
<input type="checkbox" name="checkbox_name" checked>
<label>Checkbox value</label>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>3- Check if checkbox is checked or not
I will add the script that after the jquery include and this is where we will see if the checkbox is checked or not. For that, we need to have the name of the checkbox followed by is(":checked").
$('[name="checkbox_name"]').is(":checked");This will return us true or false.
Just for the sake of debugging, we can console it.
let result= $('[name="checkbox_name"]').is(":checked");
console.log(result);
We can also add the change event in case it changes from check to uncheck and vice versa we can still get the value.
$('[name="checkbox_name"]').change(function(){
let live_result=$(this).is(":checked");
console.log(live_result);
});Conclusion:
Hope you have learned how to check if checkbox is checked or not. I have also covered how you can get the live check and uncheck status with the help change function.
Hope you like it and if you have any queries drop down below in the comment box 🙂
See you soon.
Write a Reply or Comment