jQuery | How to Check if Checkbox Checked using 2 Ways

In jQuery, a Checkbox’s state can be checked using prop() method and :checked selector.

The following are the detailed discussions on How to check checkbox status using jQuery prop() method and by using :checked selector.

1) Using prop() Method

The jQuery prop() method is basically used to get and set properties of a form control. But here we will check if the checked property of the checkbox is there or not.

    <script>
        $(function () {
            $("input:checkbox").on("change",function(){
		if($(this).prop("checked")){
                    console.log("Checkbox Checked!");
                }else{
                    console.log("Checkbox UnChecked!");
                }
            });
        });
    </script>

2) Using :checked Selector

The :checked selector can be used to get the current state of a checkbox

    <script>
        $(function () { 
            $("input:checkbox").on("change",function(){
                if($(this).is(":checked")){
                    console.log("Checkbox Checked!");
                }else{
                    console.log("Checkbox UnChecked!");
                }
            });
        });
    </script>

 

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments