Checkbox toggle behavior is reverse of what is expected?

Question

At this site there is a 'Cholera facilities"checkbox for triggering the display of a map layer.

The problem is how the checkbox behaves. It is reverse what I expect-- it triggers upon being unchecked , rather than checked ?

<div><input  type="checkbox" id="cholera_control" name="cholera_control" />
<label for="cholera_control">Cholera Facilities</label></div>

Answer 1

Just reverse the if with the else .

Instead of:

if (showCholera) {
    kmlLayerCTF.setMap(null);
} else {
    kmlLayerCTF.setMap(map);
}

do:

if (showCholera) {
    kmlLayerCTF.setMap(map);
} else {
    kmlLayerCTF.setMap(null);
}

This is happening because your initial value is false .

var showCholera = false;

...then you're reversing it before the if() statement:

showCholera = !showCholera;

...so when the if() runs, showCholera is true , and the if is executed instead of the else .

Answer 2

Change

<input type="checkbox" id="cholera_control" name="cholera_control" />
<input type="checkbox" name="mc-cb" id="mc-cb">

to:

<input type="checkbox" check="checked" id="cholera_control" name="cholera_control" />
<input checked="checked" type="checkbox" name="mc-cb" id="mc-cb">