Why the checkbox stops showing the real value after clicking it with the mouse? Jquery, PHP

Question

0.00/5 (No votes)

See more:

INTRODUCTION
I am trying to get a bunch of checkboxes checked or unchecked if I click on a "parent" checkbox.

1[]
2[][][][][][]

Something like: parent (1) gets checked; all child checkboxes (2) get checked. Parent gets unchecked, all child checkboxes get unchecked.

It works at html level: I can see how the checked property appears and disappears in the ELEMENTS tab in the developer tools on Microsoft Edge.

It works also in the UI, after loading the page, if I click on the parent checkbox all the children change accordingly. But that stops working when I click on any child. Then, even I can see how the element properties change as before, the change can't be seen graphically.

I am using jquery-3.6.0.
It looks like with older versions it works correctly.

JSFIDDLE DEMO OF THE PROBLEM
You can see the exact issue here:

Edit fiddle - JSFiddle - Code Playground[^]

With jQuery 1.4.3 it works, with newer versions i.e. 3.4.1 it doesn't.

HOW TO TEST IT:
1. check the checkbox on top. All checkboxes will be checked.
2. check it again. All checkboxes will be unchecked.
3. check any of the checkboxes on the bottom line twice. All checkboxes will be unchecked.
4. check the checkbox on top again. All checkboxes except the one you checked in the step 3 will be checked.

My code:

JavaScript

<script src="./scripts/jquery-3.6.0.min.js"></script>
<script>
	$(function() {
    var childrenTemps = $("input:checkbox.cbTempsChild")
    $("#cbTempsParent").change(function(){
        if (this.checked) {
					childrenTemps.attr("checked", "checked");
        }
        else {
					childrenTemps.removeAttr("checked");
        }
    });
    
    childrenTemps.change(function(){
        var totalElements = childrenTemps.length;
        var checkedElements = childrenTemps.filter(":checked").length;
        
        if (totalElements === checkedElements) {
            $("#cbTempsParent").attr("checked", "checked");
        } 
        else {
            $("#cbTempsParent").removeAttr("checked");
        }  
    });
});
</script>

Any idea why this happens?

Thank you in advance for your time and help.

What I have tried:

All I have been able to think about, but mostly I am surprised to see this.

Posted 21-Sep-22 4:57am

Joan M

Updated 21-Sep-22 23:55pm

Add a Solution

2 solutions

Solution 2

Using .attr("checked", "checked") and .removeAttr("checked") will change the checked attribute on the element.

You want to change the checked property on the element, which requires using .prop("checked", isChecked).

As per the documentation[^], .attr("checked") only reflects the initial state of the element as defined in the HTML source; it does not update when the element is checked / unchecked.

Updated Fiddle[^]

Posted 21-Sep-22 23:55pm

Richard Deeming

Updated 21-Sep-22 23:59pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Joan M · Accepted Answer · 2022-09-21T07:27:00

I don't know why this happens at all, but, I've found a way to solve it:

$("#cbTempsPare").change(function(){
					if (this.checked) {
						var checkedElements = childrenTemps.filter(":not(:checked)");
						checkedElements.click();
					}
					else {
						var checkedElements = childrenTemps.filter(":checked");
						checkedElements.click();
					}
			});

Doing this the child checkboxes are clicked when needed and then they react as one would expect.