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

请看这个：

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

最初，选中“县”复选框。如果我点击“Hydric土壤评级”复选框，然后点击“县”复选框，Hydric复选框仍然保持选中状态。控制台不输出任何内容，这意味着当问题发生时，

复选框\u 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);
        }
    }   
}); 

有什么想法吗

---

编辑我看到了问题：第二次单击Countries图层以选择甚至不会触发图层“添加”事件的图层，因为我只是前后发送图层。嗯

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

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

---

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

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

---

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

可以使用类名进行分组。然后给每个人一个身份证

单击类时，保存所单击类的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;
            };        
        });
    });    
});

我有一辆自行车
我有一辆车

我两者都有

我两者都没有

var selectedBox=null；
$（文档）.ready（函数（）{
$（“.CB2RBVehicles”）。单击（函数（）{
selectedBox=this.id；
$（“.CB2RBVehicles”）。每个（函数（）{
if（this.id==selectedBox）
{
this.checked=true；
}
其他的
{
此项检查=错误；
};        
});
});    
});

---

.

这里的基本问题是，您需要对一组框进行分组，然后如果单击了其中的任何一个框，则在该集中迭代，取消选中除已单击框外的所有框

可以使用类名进行分组。然后给每个人一个身份证

单击类时，保存所单击类的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;
            };        
        });
    });    
});

我有一辆自行车
我有一辆车

我两者都有

我两者都没有

var selectedBox=null；
$（文档）.ready（函数（）{
$（“.CB2RBVehicles”）。单击（函数（）{
selectedBox=this.id；
$（“.CB2RBVehicles”）。每个（函数（）{
if（this.id==selectedBox）
{
this.checked=true；
}
其他的
{
此项检查=错误；
};        
});
});    
});

---

.

什么是

eventtype

和

layername

？请张贴完整的相关代码（包括HTML）我张贴了一个“编辑”；请看。我的问题是，一开始并没有真正删除图层。谢谢。你为什么不用单选按钮呢？我会说使用复选框作为单选按钮是很糟糕的界面。@Lee Taylor:我很想使用单选按钮，但在传单.js api中找不到任何允许我使用单选按钮的东西。谢谢。但是你的页面已经有单选按钮了，不是吗？

eventtype

和

layername

应该是什么？请张贴完整的相关代码（包括HTML）我张贴了一个“编辑”；请看。我的问题是，一开始并没有真正删除图层。谢谢。你为什么不用单选按钮呢？我会说使用复选框作为单选按钮是很糟糕的界面。@Lee Taylor:我很想使用单选按钮，但在传单.js api中找不到任何允许我使用单选按钮的东西。谢谢。但是你的页面已经有单选按钮了，不是吗？你的答案很有效！有一个小的编辑需要，它是在页面上现在。非常感谢！这是一个不同的问题，我仍然有层工作不正常的问题，但复选框现在像单选按钮一样工作。谢谢你的答案有效！有一个小的编辑需要，它是在页面上现在。非常感谢！这是一个不同的问题，我仍然有层工作不正常的问题，但复选框现在像单选按钮一样工作。谢谢非常感谢你。我相信你的答案，就像上面接受的来自chep263的答案一样，是有效的。实际上，我在问题中的原始代码也是如此。我问题中的“问题”是，我没有从地图上“删除”图层，只是将它们来回发送。因此，选中/取消选中并没有触发代码中的函数。我的问题已经解决，可以在页面中看到。再次感谢！非常感谢你。我相信你的答案，就像上面接受的来自chep263的答案一样，是有效的。实际上，我在问题中的原始代码也是如此。我问题中的“问题”是，我没有从地图上“删除”图层，只是将它们来回发送。因此，选中/取消选中并没有触发代码中的函数。我的问题已经解决，可以在页面中看到。再次感谢！