How to check if the checkbox is checked in jquery?

October 11, 2021
Jquery
How to check if the checkbox is checked in jquery?

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!

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.

Tags

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


Icon