When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

Question

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes.

Currently, when I select the "all" checkbox, all the checkboxes are checked, and when I click it again, they all become unchecked. However, if I try clicking the "all" checkbox again, only that box gets selected.

When the "all" checkbox is checked, I use the following code:

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

And when the "all" checkbox becomes unchecked:

$('.chIndustry').prop('checked', false);

javascript jquery html checkbox

Answer 1

Answer №1

$(document).ready(function() {
    $(".checkall").change(function() {
        console.log($(this).is(':checked'))
        if ($(this).is(':checked')) {
            $('input[name="test"]').prop('checked', true);
        } else {
            $('input[name="test"]').prop('checked',false );
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" /></br/>
Check all    <input type="checkbox"  class="checkall" />

The solution mentioned above perfectly meets the specified requirements.

Answer 2

$(document).ready(function() {
    $(".checkall").change(function() {
        console.log($(this).is(':checked'))
        if ($(this).is(':checked')) {
            $('input[name="test"]').prop('checked', true);
        } else {
            $('input[name="test"]').prop('checked',false );
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" />
<input type="checkbox" name="test" class="test" /></br/>
Check all    <input type="checkbox"  class="checkall" />

The solution mentioned above perfectly meets the specified requirements.

Answer 3

Answer №2

Use the .prop method to deselect a selected checkbox.

$('.chIndustry').prop('checked', false);

Answer 4

Use the .prop method to deselect a selected checkbox.

$('.chIndustry').prop('checked', false);

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

Answer №1

Answer №2

Similar questions

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

Which is more efficient: Implementing caching on the frontend or on the

Issues with object changes not reflecting in Vue.js 2.0 component rendering

Issue: A React component went into suspension during the rendering process, however, no alternative UI was designated

Using PHP Hover should apply CSS styles exclusively to the specified element

What is the best method for performing cross-domain queries utilizing ajax and jsonp?

Exploring methods to detect when a PHP page has been printed using the 'ctrl+p' shortcut and then subsequently updating

Implementing Jquery validation to check for duplicates when submitting an email form in Laravel

The function given to requestAnimationFrame is not being triggered as expected

Comparing the name and URL of a link using Selenium webdriver in C#

Tips for employing 'live CSS' in Rails

Guide on accessing a nested array within a JSON object using JavaScript

Storing the order of jQuery UI Sortable in the WordPress Admin Panel

Learn how to create a registration form using Ajax, PHP, and MySQL

Why is my res.render() in Node.js and Express not functioning as expected?

Steps to activate and deactivate a submission button depending on input values

Node.js Monitoring Statistics Displayed in Command Line Interface

Show both sets of data in two tables on one page

What steps can I take to ensure a website designed for Firefox will work seamlessly on Safari and Chrome browsers as well?

How can I add content to the body of a modal in Bootstrap 3?