Checkbox behavior is unusual Jquery-CodePudding

function  SelectUnselect(){
    var boolCheckUncheck;
        debugger;
        if ($('.selectAll').prop('checked')) {
            boolCheckUncheck = true;
        }
        else boolCheckUncheck = false;

        $('.checkbox1:checkbox:visible').each(function () {
            $(this).attr('checked', boolCheckUncheck);
        });
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.6.0.slim.js"
  integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
  crossorigin="anonymous"></script>
</head>
<body>
    <div>Select All</div>
    <input type="checkbox" onchange="SelectUnselect()"  class="selectAll" />
<br/>
<br/>
    <input type="checkbox" class="checkbox1"  />
    <input type="checkbox" class="checkbox1" />
</body>
</html>

I'm finding some unusual behavior in my web app.

Essentially I have three checkboxes

id= "1" - Select All

id= "2"

id= "3"

id=1 is Select All. So if user checks that in, then 2 and 3 get selected. Same with uncheck, both 2 and 3 get unselected. My code looks like this for the id=1 onChange event

 function SelectUnselect(){

    var boolVal;
    debugger;
    if ($('.selectAll').prop('checked')) {
        boolVal= true;
    }
    else boolVal= false;

    $('.theClass:checkbox:visible').each(function () {
        $(this).attr('checked', boolVal);
    }); 
}

However, let's say I manually check in id=2, and then click on the SelectAll checkbox, then my SelectUnselect() method completely ignores it. Even though I can see both of them when I debug.

Essentially after manually clicking on any of the checkboxes, it gets completely ignored when I click SelectAll to check or uncheck.

Any idea why this could happen?

CodePudding user response：

The attribute checked serves only as the initial value.

Manipulating the attribute later has no effect on the checkbox; use the property checked instead. This works the same way as the value attribute on text inputs.

CodePudding user response：

You can use the following solution to solve it.

HTML:

<input type="checkbox"  class="selectAll" />
<input type="checkbox" id="checkbox1" class="other-checkboxes" />
<input type="checkbox" id="checkbox2" class="other-checkboxes"/>

Javascript:

$(".selectAll").on("change", function(){
    if ($(this).prop("checked")){
        // selectAll is checked
        $(".other-checkboxes").prop("checked", true);
    }
    else{
        // selectAll is not checked
        $(".other-checkboxes").prop("checked", false);
    }
});

$(".other-checkboxes").on("change", function(){

    // checking if all the "other-checkboxes" checkboxes are checked
    if ($('.other-checkboxes:checked').length == $('.other-checkboxes').length){
        $(".selectAll").prop("checked", true);
    }
    else{
        $(".selectAll").prop("checked", false);
    }
});