Check if checkbox is checked or not using jQuery

  5 months ago     Views:  447  
Julius Braun
1 Follows


JQuery is simple but very helpful and useful framework in web develoing. Every web developer should have known jQuery after learning Javascript. It saves lot a time to write lengthy code than Javascript.

In this article, we will learn on how to find if the clicked checkbox is checked or unchecked using JQuery.

jQuery has prop() method that sets or returns properties or property value. To return the property value in jQuery, use the bellow code:

$(selector).prop(property);

This way we can check if checkboc has checked property or not using bellow code.

$('input[type="checkbox"]').click(function() {
    if($(this).prop("checked") == true) {
        alert("you just checked checkbox.");
    } else if($(this).prop("checked") == false) {
        alert("you just unchecked checkbox.");
    }
});

Here is the full HTML code by which you can also test it. Just copy and paste bellow code in HTML file and run in the browser.

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Get Checkbox checked property value</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <h1>Get Checkbox checked property value</h1>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="checkbox-value">Check me!
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('input[type="checkbox"]').click(function() {
                    if($(this).prop("checked") == true) {
                        alert("you just checked checkbox.");
                    } else if($(this).prop("checked") == false) {
                        alert("you just unchecked checkbox.");
                    }
                });
            });
        </script>
    </body>
</html>

On check event, you can find checkbox value and set new event as you required. For example, I have set alert() event on checkbox.

I hope this article will help you.


Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

OR

No Comments