使复选框的行为类似于单选按钮

Question

请看:http://gisdev.clemson.edu/fireflies

向右上方是三个复选框,我试图让它们像单选按钮一样工作.编程的一部分是有效的,但这是有问题的:

最初,选中"Counties"复选框.如果我点击'Hydric Soil Rating'复选框,然后点击Counties复选框,Hydric复选框仍然保持选中状态.控制台不输出任何内容,这意味着checkboxes_controls当问题发生时变量的值会丢失.

这是相关代码:

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);
        }
    }   
}); 

任何的想法？

编辑我看到了问题:第二次单击Counties图层选择它甚至不触发图层'Add'事件,因为我只是向后和向前发送图层.Hmmmm.

Answer 1

这里的基本问题是您需要对一组框进行分组,然后如果单击任何一个框,则遍历该集,取消选中除了单击的所有框之外的所有框.

您可以使用类名进行分组.然后给每个人一个id.

单击该类时,保存单击的ID.然后遍历类中的复选框,并取消选中任何ID与您保存的ID不同的ID.

<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;
            };        
        });
    });    
});

这是一个例子.