Group checkbox state not set initially and not updated

[kodar-anders]

I would like the group checkbox to be set to selected if all overlays in the group is selected when adding them to the map. (Currently the group checkbox is always unselected no matter if the overlays is added to the map or not from the beginning)

I would like the group checkbox to be updated when selecting/deselecting the overlays in the group. For example, let's say I have 5 overlays and 4 of them is selected (and visible on the map). When I select the last overlay, then I want the group checkbox to be selected as well.

[ismyrnow]

That sounds reasonable. I'm surprised the group checkboxes don't behave like this already. If you or another community member can open a pull request with this enhancement, I will merge it in.

[grischard]

A temporary workaround could be to check all checkboxes, e.g. with jQuery:

    // Check all group checkboxes
    $('.leaflet-control-layers-group-selector').prop('checked', true);

[tunaSandwich]

@grischard that would be a good workaround but I am unable to target $('.leaflet-control-layers-group-selector') for some reason. Has anyone found a solution for this issue?

[magicmb]

That sounds reasonable. I'm surprised the group checkboxes don't behave like this already. If you or another community member can open a pull request with this enhancement, I will merge it in.

Wondering if this was ever merged after work by @NHellFire?

Would be handy as the current way can seem confusing. I've got two groups and css colour styled the group heads (all items) of each group to distinguish these as special group checkboxes, plus I added another separator div between the two groups to make the layout more obvious, but even so it would still be better if the group heads are automatically checked by default if all other items are selected.

I'll probably look at coding my own manually workaround as per @grischard suggestion, perhaps triggered by an on.change event, but I've run into some issues with something similar when I was trying to implementing an exclusiveGroups option so am a little hesitant at the mo. After failing to set up exclusiveGroups the way I wanted them I discovered that if you remove the exclusiveGroups option you end up with normal checkbox groups instead.

Ideally I would have liked to have gone with a combination of exclusiveGroups and a checkbox group for my project if only it could retain an "all layers" selection option i.e. turn a checkbox group into a radio group but retain the option to select all (like with the checkbox group heads).

As briefly mentioned before I tried to implement this manually using another "all" layers overlay but run into some bizarre issues (may raise a separate ticket for this) and not all expected layers being displayed which probably has something to do with how overlays are grouped together before finally opting to go for an all checkbox Group solution over a combination with exclusive radio Groups. Now I'm wondering about the whole "support for grouping overlays together" and if my current leaflet-groupedlayercontrol checkbox only setup isn't something I could have achieved with standard Leaflet?

[magicmb]

@grischard that would be a good workaround but I am unable to target $('.leaflet-control-layers-group-selector') for some reason. Has anyone found a solution for this issue?

Just realised this is a few years late LOL but then I only started using leaflet recently. My own workaround to this is:

$('[id="leaflet-control-layers-group-1"]').on('change',function(e){
  $('#leaflet-control-layers-group-1').each(function() {
    var grpSelector = $(this).find('input[class|="leaflet-control-layers-group-selector"]'); 
    var elements = $(this).find('input[class|="leaflet-control-layers-selector"]');
    var checkboxCount = elements.filter(':checked').length;

    if (checkboxCount == elements.length) { 
       grpSelector.prop('checked', true);
    }  else { 
       grpSelector.prop('checked', false);
     }
  });
});

[oarque]

... and for dynamic groups:

$("[id*='leaflet-control-layers-group']").on('change', function (e) {
  $("[id*='leaflet-control-layers-group']").each(function () {
    var grpSelector = $(this).find('input[class|="leaflet-control-layers-group-selector"]');
    var elements = $(this).find('input[class|="leaflet-control-layers-selector"]');
    var checkboxCount = elements.filter(':checked').length;

    if (checkboxCount == elements.length) {
      grpSelector.prop('checked', true);
    } else {
      grpSelector.prop('checked', false);
    }
  });
});

[alansaviolobo]

This works great.

I just had to add this to get it to set correctly on first load.
$("[id*='leaflet-control-layers-group']").trigger("change");