使复选框的行为类似于单选按钮 [英] making checkboxes behave like radio buttons

问题描述

请参阅以下内容: 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:

最初，县"复选框被选中.如果我要单击"Hydric土壤等级"复选框，然后再单击"Counties"复选框，则Hydric复选框仍保持选中状态.控制台不会输出任何内容，这意味着问题发生时checkboxes_controls变量的值会丢失.

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.

以下是相关代码:

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图层以选择它甚至不会触发添加"事件，因为我只是前后发送这些图层.嗯

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.

推荐答案

此处的基本问题是，您需要对一组框进行分组，然后，如果单击了一组框中的任何一个，则遍历该框，取消选中所有框，被点击的那个.

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.

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

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

单击该类时，请保存该单击的ID.然后遍历该类中的复选框，然后取消选中任何与您保存的ID都不相同的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;
            };        
        });
    });    
});

这里是一个示例.

这篇关于使复选框的行为类似于单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！