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

Question

请看这个：http://gisdev.clemson.edu/fireflies

右上角是三个复选框，我试图让它们像单选按钮一样工作。部分编程正在运行，但这里有一些问题：

最初，选中“县”复选框。如果我点击“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 图层以选择它甚至不会触发图层“添加”事件，因为我只是将图层前后发送。嗯。

Answer 1

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

您可以使用类名进行分组。然后给每个人一个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;
            };        
        });
    });    
});

Here's an example.

Answer 2

如果您希望复选框充当单选按钮，请将 onClick 事件侦听器附加到所有复选框，删除“选中”属性并将其放置在被单击的那个上。

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