My js code:

$('div[aria-label="Asukohad"] input[type="checkbox"]').on("change", function() {
    var element = $(this);

    if(element.is(":checked")) {
        //todo
    } else {
        uncheckAll();
    }
});

function uncheckAll() {
    $('div[aria-label="Asukohad"] input[type="checkbox"]').attr('checked', false);
}

When I select some checkboxes and then unselect one of them, all the checkboxes get unchecked, which is great. But now when I select another checbox all the other checkboxes are also getting checked which where unchekced by jQuery. I got a feeling that I have to sync the checkboxes somehow when I do the unchecking with jQuery.

Checkboxes are located in post/page properties panel.

Video demo:

My js code:

$('div[aria-label="Asukohad"] input[type="checkbox"]').on("change", function() {
    var element = $(this);

    if(element.is(":checked")) {
        //todo
    } else {
        uncheckAll();
    }
});

function uncheckAll() {
    $('div[aria-label="Asukohad"] input[type="checkbox"]').attr('checked', false);
}

When I select some checkboxes and then unselect one of them, all the checkboxes get unchecked, which is great. But now when I select another checbox all the other checkboxes are also getting checked which where unchekced by jQuery. I got a feeling that I have to sync the checkboxes somehow when I do the unchecking with jQuery.

Checkboxes are located in post/page properties panel.

Video demo:https://vimeo.com/343601969

• jquery
• wp-admin

2 Answers 2

Can you please clarify your question? Are you attempting to make a checkbox that can clear all checkboxes and also recheck all checkboxes by checking that one checkbox?

Also a checked input would be written like this:

<input id="editor-post-taxonomies-hierarchical-term-48" class="editor-post-taxonomies__hierarchical-terms-input" type="checkbox" checked value="48" />

You can do this:

$('div[aria-label="Asukohad"] input[type="checkbox"]').on("change", function() {
var element = $(this);

if(element.is(":checked")) {
    // do nothing.
} else {
    uncheckAll();
}
});

function uncheckAll() {
    $('div[aria-label="Asukohad"] input[type="checkbox"]').removeProp('checked');
}

I had the same question, so here you go.

To check all boxes:

jQuery('#select-button').on('click',function(){
    jQuery('.outer-div td label input[type="checkbox"]').prop('checked', true);
});

To uncheck all boxes:

jQuery('#select-button').on('click',function(){
    jQuery('.outer-div td label input[type="checkbox"]').removeProp('checked');
});