jQuery Checkbox

Checkboxes expose boolean state through the DOM checked property, so use jQuery .prop("checked") to read or change that state.

Read Checkbox Status Top ↑

const checked =
    $( "#ckb" ).prop( "checked" );

React to the change Event Top ↑

$( "#ckb" ).on( "change", function () {
    const checked =
        $( this ).prop( "checked" );

    console.log( checked );
});

Check or Uncheck Another Checkbox Top ↑

$( "#ckb" ).on( "change", function () {
    $( "#ckb2" ).prop(
        "checked",
        $( this ).prop( "checked" )
    );
});

Use data-* Attributes Top ↑

<input type="checkbox"
       id="abc"
       name="ckb"
       data-month-name="jun"
       data-equipment-id="abc691">

$( 'input[type="checkbox"]' )
    .on( "change", function () {
        const id = this.id;
        const name = this.name;
        const checked =
            $( this ).prop( "checked" );

        const monthName =
            $( this ).data( "month-name" );

        console.log(
            id,
            name,
            checked,
            monthName
        );
    });

Enable or Disable Another Checkbox Top ↑

$( "#ckb" ).on( "change", function () {
    $( "#ckb2" ).prop(
        "disabled",
        $( this ).prop( "checked" )
    );
});

Read ID, Value and Checked State Top ↑

$( 'input[type="checkbox"]' )
    .on( "change", function () {
        const id = this.id;
        const value = $( this ).val();
        const checked =
            $( this ).prop( "checked" );

        $( "#msg_display" ).text(
            "id: " + id +
            ", value: " + value +
            ", checked: " + checked
        );
    });

Collect All Checked Values Top ↑

const values = $(
    'input[type="checkbox"]:checked'
).map(function () {
    return this.value;
}).get();

$( "#display" ).text(
    values.join( ", " )
);

Count Checked Checkboxes Top ↑

const totalChecked =
    $( ".ckb:checkbox:checked" ).length;

You can also filter by a custom data attribute:

const totalChecked = $(
    ':checkbox:checked[data-id="my_id"]'
).length;

Limit How Many Checkboxes Can Be Selected Top ↑

$( 'input[type="checkbox"]' )
    .on( "change", function () {
        const total = $(
            'input[type="checkbox"]:checked'
        ).length;

        if ( total > 2 ) {
            $( this ).prop( "checked", false );
            $( "#display" ).text(
                "You have reached your maximum limit."
            );
        }
    });

Control a Group from One Checkbox Top ↑

$( "#ckb5" ).on( "change", function () {
    const checked =
        $( this ).prop( "checked" );

    $( ".group-checkbox" ).prop(
        "checked",
        checked
    );
});

Related Checkbox Tutorials Top ↑

• Validate terms/conditions checkbox
• Show or hide password text with a checkbox
• jQuery UI Checkboxradio
• Checkbox restrictions in a data matrix

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• button.php
• checkbox-demo/checkbox1.php
• checkbox-demo/checkbox10.php
• checkbox-demo/checkbox2.php
• checkbox-demo/checkbox3.php
• checkbox-demo/checkbox4.php
• checkbox-demo/checkbox5.php
• checkbox-demo/checkbox6.php
• checkbox-demo/checkbox7.php
• checkbox-demo/checkbox9.php
• listbox.php
• radio-button.php
• textbox.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: