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图层选择它甚至不会触发图层'添加'事件，因为我只是向后和向前发送图层。 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;
            };        
        });
    });    
});

Here's an example

Answer 2

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

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

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

2 个答案: