Languages
[Edit]
EN

jQuery - how to check if input checkbox is checked?

14 points
Created by:
Marcin
2471

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>
Hey šŸ‘‹
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.