Update Bootstrap Switch with Leaflet Layer Group

Question

I have this JSFiddle that shows two example layers that can be toggled on and off using the Bootstrap Switch to add and remove them from the map; this works fine.

The problem I am having is updating the state of the individual layers switches when the group switch is toggled. As per the example I can create a switch to add the group of layers to the map, however the switches for the individual layers do not update to show the user that is a layer that is effected by the group of layers being added.

I thought this might be possible through the hasLayer method but I'm not entirely sure how this would be implemented.

Answer 1

Add the following line in the onSwitchChange event handler of your group switch:

$("[name='my-checkbox2'], [name='my-checkbox3']").bootstrapSwitch('state', state, true);

Updated JSFiddle: https://jsfiddle.net/s537t380/26/

Reference:

http://www.bootstrap-switch.org/methods.html

The method state can receive an optional third parameter skip. if true, switchChange event is not executed. The default is false.