making checkboxes behave like radio buttons

Question

Please see this: http://gisdev.clemson.edu/fireflies

Toward the top right are three checkboxes and I am trying to make them work like radio buttons. Part of the programming is working but here is something which is problematic:

Initially, the 'Counties' checkbox is checked. And if I were to click on the 'Hydric Soil Rating' checkbox and then click back on the Counties checkbox the Hydric checkbox still stays checked. The console doesn't output anything, meaning the value of checkboxes_controls variable gets lost when the problem happens.

Here is relevant code:

var checkboxescontainer = document.querySelectorAll('.leaflet-control-layers-overlays');
var checkboxes_controls = checkboxescontainer[0].children;

$(checkboxes_controls).each(function() 
{
    console.log($.trim($(this).text()));
    if (eventtype === 'add') 
    {
        if (layername === $.trim($(this).text()))  
        {
            // don't do anything but uncheck all others--making them work like radio buttons
        }
        else 
        {
            $(this).find('input:checkbox').attr('checked', false);
        }
    }   
}); 

Any idea?

Edit I see the problem: Clicking on the Counties layer the second time to select that doesn't even fire the layer 'Add' event because I am merely sending the layers back and front. Hmmmm.

Answer 1

The essential problem here is that you need to group a set of boxes and then if any one of the set is clicked, iterate through the set, unchecking all except the one that was clicked.

You can group using a class name. Then give each an id.

When the class is clicked, save the id of the clicked one. Then iterate through the checkboxes within the class and uncheck any that have a different id than the one you saved off.

<form action="">
    <input id="cbBike" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Bike" checked>I have a bike<br />
    <input id="cbCar" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Car">I have a car<br />
    <input id="cbBoth" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Both">I have both<br />
    <input id="cbNeither" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Neither">I have neither<br />
</form>


var selectedBox = null;

$(document).ready(function() {
    $(".CB2RBVehicles").click(function() {
        selectedBox = this.id;

        $(".CB2RBVehicles").each(function() {
            if ( this.id == selectedBox )
            {
                this.checked = true;
            }
            else
            {
                this.checked = false;
            };        
        });
    });    
});

Here's an example.

Answer 2

If you want checkboxes to act as radio buttons, attach onClick event listeners to all checkboxes, remove "checked" attributes and place it on the one being clicked.

checkboxes_controls = jQuery(document.querySelectorAll('.leaflet-control-layers-overlays input[type=checkbox]'))

jQuery(checkboxes_controls).click(function(){
    jQuery(checkboxes_controls).removeAttr('checked');
    jQuery(this).attr('checked', 'checked');
});