Toggle checkboxes with jQuery and Prototype JS

When a form contains a long list of checkboxes, manually selecting or clearing each option can quickly become inconvenient. A Check All, Uncheck All, or Toggle Selection control makes the process much faster and provides a better user experience.

In this guide, you'll learn how to toggle multiple checkboxes using jQuery, modern JavaScript, and Prototype.js. We'll also cover accessibility, dynamically added checkboxes, common implementation mistakes, and practical patterns you can reuse in forms and admin interfaces.

What Does Checkbox Toggling Mean?

Checkbox toggling means changing the current state of a checkbox:

• An unchecked checkbox becomes checked.
• A checked checkbox becomes unchecked.

For example, if you have five checkboxes and three are currently selected, clicking a toggle button will reverse the state of all five checkboxes. The three selected options become unchecked, while the two unselected options become checked.

This is different from a traditional Check All button, which simply sets every checkbox to checked regardless of its current state.

Basic HTML for a Checkbox List

Let's start with a simple list of checkboxes. The wrapper element gives us a convenient way to target only the checkboxes that belong to this particular group.

<div id="fruits">
    <button type="button" id="toggleCheckboxes">
        Toggle Selection
    </button>
    <div>
        <input type="checkbox" name="fruit[]" value="Apple" id="apple">
        <label for="apple">Apple</label>
    </div>
    <div>
        <input type="checkbox" name="fruit[]" value="Banana" id="banana">
        <label for="banana">Banana</label>
    </div>
    <div>
        <input type="checkbox" name="fruit[]" value="Orange" id="orange">
        <label for="orange">Orange</label>
    </div>
    <div>
        <input type="checkbox" name="fruit[]" value="Mango" id="mango">
        <label for="mango">Mango</label>
    </div>
    <div>
        <input type="checkbox" name="fruit[]" value="Grapes" id="grapes">
        <label for="grapes">Grapes</label>
    </div>
</div>

The important part is the id="fruits" wrapper. It allows the JavaScript to target only the checkboxes inside this group rather than accidentally changing checkboxes elsewhere on the page.

Toggle Checkboxes with Modern JavaScript

If you don't need jQuery or Prototype.js, modern JavaScript can handle this without any external library.

function toggleCheckboxes() {
    const checkboxes = document.querySelectorAll(
        '#fruits input[type="checkbox"]'
    );
    checkboxes.forEach(function (checkbox) {
        checkbox.checked = !checkbox.checked;
    });
}
document
    .getElementById('toggleCheckboxes')
    .addEventListener('click', toggleCheckboxes);

The key part is:

checkbox.checked = !checkbox.checked;

The checked property contains a Boolean value. If the checkbox is checked, its value is true. If it is unchecked, its value is false.

The ! operator reverses that value. Therefore:

• true becomes false.
• false becomes true.

Toggle Checkboxes with jQuery

If your project already uses jQuery, you can implement the same functionality with a short jQuery function.

function toggleCheckboxes() {    $('#fruits input[type="checkbox"]').each(function () {        $(this).prop('checked', !this.checked);    });}

You can connect the function to a button like this:

$('#toggleCheckboxes').on('click', function () {    toggleCheckboxes();});

The .prop() method is used here because checked is a DOM property that represents the current state of the checkbox.

Why Use .prop() Instead of .attr()?

This is an important distinction when working with jQuery checkboxes.

For the current checked state, use:

$(checkbox).prop('checked', true);

A common mistake is trying to change the current state with:

$(checkbox).attr('checked', true);

For checkbox state manipulation, .prop() is the appropriate approach because checked represents the current DOM property.

Toggle Checkboxes with Prototype.js

If you're maintaining an older application that still uses Prototype.js, the original approach can be written as follows:

function toggleCheckboxes() {    $$('#fruits input[type="checkbox"]').each(function (checkbox) {        checkbox.checked = !checkbox.checked;    });}

Prototype.js's $$() function can select elements using a CSS selector. The .each() method then iterates through the selected elements and reverses their checked state.

This approach can be useful when maintaining legacy PHP, Magento 1, or other older applications that already depend on Prototype.js.

Toggle Only a Specific Checkbox Group

If a page contains several checkbox groups, avoid using a broad selector such as:

$('input[type="checkbox"]')

That selector may affect every checkbox on the page.

Instead, scope the selector to the required container:

$('#fruits input[type="checkbox"]')

This ensures that only checkboxes inside the fruits container are changed.

Check All and Uncheck All

Sometimes a true Check All and Uncheck All control is more appropriate than a toggle button.

Check All with jQuery

$('#checkAll').on('click', function () {    $('#fruits input[type="checkbox"]').prop('checked', true);});

Uncheck All with jQuery

$('#uncheckAll').on('click', function () {    $('#fruits input[type="checkbox"]').prop('checked', false);});

Unlike a toggle function, these functions always produce a predictable result.

Check All, Uncheck All, and Toggle Controls

You can provide all three options when a form contains a large number of selections:

<button type="button" id="checkAll">Check All</button>
<button type="button" id="uncheckAll">Uncheck All</button>
<button type="button" id="toggleAll">Toggle Selection</button>

const checkboxes = '#fruits input[type="checkbox"]';
$('#checkAll').on('click', function () {
    $(checkboxes).prop('checked', true);
});
$('#uncheckAll').on('click', function () {
    $(checkboxes).prop('checked', false);
});
$('#toggleAll').on('click', function () {
    $(checkboxes).each(function () {
        this.checked = !this.checked;
    });
});

Toggle Only Enabled Checkboxes

Disabled checkboxes generally should not be changed by a bulk selection control. You can exclude them from the selector:

$('#fruits input[type="checkbox"]:enabled').each(function () {    this.checked = !this.checked;});

This is useful when certain options are unavailable based on another setting or user permission.

Toggle Only Visible Checkboxes

In interfaces containing filters, expandable sections, or hidden form fields, you may want to toggle only visible checkboxes.

$('#fruits input[type="checkbox"]:visible').each(function () {    this.checked = !this.checked;});

This can be useful in admin dashboards where users work with filtered lists.

Working with Dynamically Added Checkboxes

Modern applications sometimes add checkbox elements after the page has loaded. If the checkbox selector is executed only once, newly created elements may not be included.

One simple approach is to run the selector when the button is clicked:

$('#toggleCheckboxes').on('click', function () {
    $('#fruits input[type="checkbox"]').each(function () {
        this.checked = !this.checked;
    });
});

Because the checkbox collection is selected when the button is clicked, newly added checkboxes inside the container can also be included.

Accessibility Considerations

A bulk checkbox control should be usable with a keyboard and understandable to screen-reader users.

Use a real <button> element instead of relying on a clickable <div>:

<button type="button" id="toggleCheckboxes">    Toggle Selection</button>

Also make sure every checkbox has an associated label:

<input type="checkbox" id="apple" name="fruit[]" value="Apple"><label for="apple">Apple</label>

This improves usability because users can click the label as well as the checkbox itself.

Should You Use Toggle or Check All?

The right behavior depends on what the user needs to accomplish.

• Check All: Selects every available checkbox.
• Uncheck All: Clears every selected checkbox.
• Toggle Selection: Reverses the current state of every checkbox.

For example, a toggle can be useful when a user wants to quickly reverse an existing selection. A Check All button is generally more predictable when the goal is simply to select every option.

Common Mistakes When Toggling Checkboxes

1. Selecting every checkbox on the page

Using a global selector can unintentionally change unrelated form fields. Scope your selector to the appropriate container.

2. Using attr() for the current checked state

When using jQuery, use .prop('checked', ...) for the current checkbox state rather than treating it as a normal HTML attribute.

3. Forgetting the checkbox selector

Target the actual checkbox inputs:

#fruits input[type="checkbox"]

4. Ignoring disabled fields

If some options are intentionally disabled, consider using the :enabled selector so the bulk action doesn't modify unavailable options.

5. Using inline JavaScript everywhere

An inline onclick handler can work, but separating JavaScript from HTML often makes larger applications easier to maintain and test.

Complete jQuery Example

Here is a complete example that combines the HTML and jQuery implementation:

<div id="fruits">
    <button type="button" id="toggleCheckboxes">
        Toggle Selection
    </button>
    <div>
        <input type="checkbox" name="fruit[]" value="Apple" id="apple">
        <label for="apple">Apple</label>
    </div>
    <div>
        <input type="checkbox" name="fruit[]" value="Banana" id="banana">
        <label for="banana">Banana</label>
    </div>
    <div>
        <input type="checkbox" name="fruit[]" value="Orange" id="orange">
        <label for="orange">Orange</label>
    </div>
    <div>
        <input type="checkbox" name="fruit[]" value="Mango" id="mango">
        <label for="mango">Mango</label>
    </div>
</div>
<script>$('#toggleCheckboxes').on('click', function () {
    $('#fruits input[type="checkbox"]:enabled').each(function () {
        this.checked = !this.checked;
    });});</script>

Modern JavaScript Alternative Without jQuery

If you're building a new application, you may not need a JavaScript library for this functionality.

document
    .getElementById('toggleCheckboxes')
    .addEventListener('click', function () {
        document
            .querySelectorAll('#fruits input[type="checkbox"]:not(:disabled)')
            .forEach(function (checkbox) {
                checkbox.checked = !checkbox.checked;
            });
    });

This keeps the implementation lightweight while providing the same checkbox functionality.

Conclusion

Toggling multiple checkboxes is a small feature, but it can make forms, dashboards, product filters, and administration interfaces much easier to use.

If you're maintaining a legacy application, Prototype.js can still handle checkbox toggling with its existing selector and iteration methods. If your project already uses jQuery, .prop('checked', ...) provides a straightforward solution. For new projects, native JavaScript can perform the same task without requiring an additional library.

The most important implementation details are to scope your selectors correctly, use the appropriate checkbox property, account for disabled or dynamically added fields, and make the controls keyboard accessible.

Frequently Asked Questions

How do I toggle all checkboxes with jQuery?

You can select the required checkbox group and reverse each checkbox's current state:

$('#fruits input[type="checkbox"]').each(function () {    this.checked = !this.checked;});

How do I check all checkboxes using jQuery?

Use the prop() method and set the checked property to true:

$('#fruits input[type="checkbox"]').prop('checked', true);

How do I uncheck all checkboxes using jQuery?

Set the checked property to false:

$('#fruits input[type="checkbox"]').prop('checked', false);

What is the difference between Check All and Toggle Selection?

Check All always selects every checkbox. Toggle Selection reverses the current state of each checkbox. Therefore, a checked checkbox becomes unchecked and an unchecked checkbox becomes checked.

Should I use .prop() or .attr() for checkbox state in jQuery?

Use .prop('checked', true) or .prop('checked', false) when changing the current checked state of a checkbox. The checked property represents the current state of the form control.

Can I toggle only checkboxes inside a specific div?

Yes. Scope your selector to the container:

$('#fruits input[type="checkbox"]')

This prevents the function from changing unrelated checkboxes elsewhere on the page.

Can I toggle disabled checkboxes?

You can technically target them, but disabled controls are usually intended to remain unavailable. For bulk actions, it is generally better to exclude them:

$('#fruits input[type="checkbox"]:enabled')

Can I toggle checkboxes without jQuery?

Yes. Modern browsers provide querySelectorAll(), forEach(), and the checkbox checked property, so this functionality can be implemented using native JavaScript.

Does this approach work for dynamically added checkboxes?

Yes, when the checkbox elements are selected at the time the toggle action runs. This allows the function to include checkboxes that were added to the container after the initial page load.

Is Prototype.js still useful for checkbox toggling?

Prototype.js can still be relevant when maintaining an older application that already depends on it. For new projects, modern JavaScript is generally sufficient for simple DOM manipulation without adding a legacy dependency.