Top community members
All Wiki Articles Create Wiki Article

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ā¤ šŸ’»

If you think sharing knowledge and helping other is valuable.

join our community - Click here

jQuery - how to check if input checkbox is checked?

0 contributions
14 points

In this article, we're going to have a look at how to check if checkbox is checked with jQuery.

Quick solution:

// solution 1
var checked = $('#my-checkbox').prop('checked');

// solution 2
var checked = $('#my-checkbox').is(':checked');

// solution 3 - with Vanilla JS
var checkbox = document.getElementById('my-checkbox');
var checked = checkbox.checked;

Ā 

More detailed description of solutions areĀ placed below.

1. prop method example

In this section prop method is used to get checked property value.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <label>
    <input id="my-checkbox" type="checkbox" /> Agreement
  </label>
  <script>

    $(document).ready(function() {
      	var checkbox = $('#my-checkbox');
        
      	checkbox.click(function() {
      		console.log(checkbox.prop('checked'));
        });
    });

  </script>
</body>
</html>

2. is method example

In this section isĀ method is used with :checked selector to check current state of checkbox.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <label>
    <input id="my-checkbox" type="checkbox" /> Agreement
  </label>
  <script>

    $(document).ready(function() {
        var checkbox = $('#my-checkbox');
        
      	checkbox.click(function() {
      		console.log(checkbox.is(':checked'));
        });
    });

  </script>
</body>
</html>

3. Subquery example

In this section checkbox element finding with selector is described.

3.1. Selector example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <label>
    <input id="my-checkbox" type="checkbox" /> Agreement
  </label>
  <script>

    $(document).ready(function() {
      	$('#my-checkbox').click(function() {
          	var checkbox = $('#my-checkbox:checked');
          
      		console.log(checkbox.length > 0);
        });
    });

  </script>
</body>
</html>

3.2. find method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <label>
    <input id="my-checkbox" type="checkbox" /> Agreement
  </label>
  <script>

    $(document).ready(function() {
      	$('#my-checkbox').click(function() {
          	var checkbox = $.find(':checked');
          
      		console.log(checkbox.length > 0);
        });
    });

  </script>
</body>
</html>

4. Vanilla JavaScript mixed example

In jQuery each function called with handled event uses as context DOM element on that event occurs. It makes in simple way possible to check checkbox state with Vanilla JS. In below example checked property is used to get current state of checkbox.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <label>
    <input id="my-checkbox" type="checkbox" /> Agreement
  </label>
  <script>

    $(document).ready(function() {
        $('#my-checkbox').click(function() {
          	// this represents JavaScript DOM object
            // it can be used to check if checkbox is checked

          	console.log(this.checked); 
        });
    });

  </script>
</body>
</html>

5. attr method example

Note: this approach returns only checked attribute value - if state is changed by user interaction with UIĀ it stays same - do not use it to check curent state (it is recomended to do not use it with onclick, onchange orĀ oniput events too if developer does not now how it works).

Simple example of problem is presented below.Ā 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <label>
    <input id="my-checkbox" type="checkbox" checked="checked" /> Agreement
  </label>
  <script>

    $(document).ready(function() {
      	var checkbox = $('#my-checkbox');
        
      	console.log(checkbox.attr('checked'));
      
      	// attr and prop methods comparision
      
      	console.log('----[ TEST ]----');
      	console.log(checkbox.prop('checked') + ' ' + checkbox.attr('checked'));
       	checkbox.prop('checked', false);
      	console.log(checkbox.prop('checked') + ' ' + checkbox.attr('checked'));
      	console.log('----------------');
    });

  </script>
</body>
</html>
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey šŸ‘‹
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more