The state of checkbox looks updated, but it is not updated actually

Question

I have strange issue. I am developing something for Magento. I added link "Select all categories" and add a jQuery event to check all checkboxes when I click on it. It works great, but somehow the html is not updated and Magento can't see that all inputs are selected. But when I manually click on a checkbox, it updates html (I am looking at the console) and Magento save button works just fine.

How to resolve this issue? I am not sure what else should I do to perform updating html. It look like it works (checkboxes are selected), but please take a look at the console and html. Html must be updated.

I created jsfiddle: here

Answer 1

尝试这个：

.attr('checked', 'checked');

Answer 2

Just check all checkboxes, like this .

Your is(':checked') IF statement seems wrong as it should be enclosed on an .each() so it applies to all checkboxes, try the more simple approach on the fiddle I linked.

Answer 3

Did you try prop('checked', true); instead of prop('checked', 'checked'); ? That's what I see in all the examples.

Answer 4

I figured it out. It was Magento issue. Magento doesn't use that form, it uses hidden input and collects selected checkboxes. Will upvote all answers anyway. Thanks

Answer 5

You can use something like :

// custom jQuery added
jQuery(function() {
    var to_check = false;       
    jQuery(".select-all-categories").click(function(){
        if (!to_check)
            to_check = true;
        else
            to_check = false;

        jQuery("#banner-categories input[type=checkbox]").each(function(){
            if (!to_check)      
                jQuery(this).removeAttr("checked");
            else  
                jQuery(this).attr("checked","checked");
        });          
        return false;
    });
});

Code can be optimized