Article Categories

Selected Reading

How do I check whether a checkbox is checked in jQuery?

Javascript Web Development Object Oriented Programming

To check whether a checkbox is checked in jQuery, you can use several methods. The most common approaches are using the .is(':checked') method, the .prop('checked') method, or implementing toggle functionality.

Method 1: Using .is(':checked')

The .is(':checked') method returns a boolean value indicating whether the checkbox is checked:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Check Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="checkbox" id="myCheckbox"> Check me
    <button id="checkStatus">Check Status</button>
    <div id="result"></div>

    <script>
        $('#checkStatus').click(function() {
            if ($('#myCheckbox').is(':checked')) {
                $('#result').text('Checkbox is checked!');
            } else {
                $('#result').text('Checkbox is not checked.');
            }
        });
    </script>
</body>
</html>

Method 2: Using .prop('checked')

The .prop('checked') method also returns a boolean value:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Prop Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="checkbox" id="propCheckbox"> Toggle me
    <div id="status">Status will appear here</div>

    <script>
        $('#propCheckbox').change(function() {
            var isChecked = $(this).prop('checked');
            $('#status').text('Checkbox is ' + (isChecked ? 'checked' : 'unchecked'));
        });
    </script>
</body>
</html>

Method 3: Toggle Content Based on Checkbox State

You can use the checkbox state to show or hide content dynamically:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Toggle Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="checkbox" id="selectName"> Show my name
    <div id="txtName" style="display:none">Your name is Adam Smith</div>

    <script>
        $('#selectName').click(function() {
            $("#txtName").toggle(this.checked);
        });
    </script>
</body>
</html>

Comparison of Methods

Method	Return Type	Use Case
`.is(':checked')`	Boolean	Simple true/false check
`.prop('checked')`	Boolean	Getting/setting checkbox state
`this.checked`	Boolean	Inside event handlers

Key Points

Use .is(':checked') for simple boolean checks
Use .prop('checked') when you need to both get and set the state
The change event is preferred over click for checkbox state changes
Always use jQuery 3.x or later for better performance and security

Conclusion

jQuery provides multiple ways to check checkbox states. Use .is(':checked') for simple checks and .prop('checked') for more complex scenarios involving state manipulation.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

371 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next