Languages
[Edit]
EN

jQuery - how to check if input checkbox is checked?

14 points
Created by:
Marcin
15680

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>
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join