使用javascript将复选框转换为单选按钮？

Question

我正在尝试将复选框转换为部分工作的单选按钮，但没有取消选择先前选定的单选按钮。我正在寻找一次将一个按钮显示为选定按钮的解决方案。

var layers = {
    'Esri_WorldImagery': Esri_WorldImagery.addTo(this.baseMap),
    'World_Topo_Map': World_Topo_Map//.addTo(this.baseMap)
};

var layerHtml = '<ul class="fa-ul">';
for (var key in layers) {
    if (layers.hasOwnProperty(key)) {
        var state = this.baseMap.hasLayer(layers[key]) ? 'checked="checked"' : '';
        //layerHtml += '<li><label><input type="checkbox" ' + state + ' value="' + key + '" >' + key + '</label>';
        layerHtml += '<li><label><input type="radio" ' + state + ' value="' + key + '" >' + key + '</label>';
    }
}

layerHtml += '</ul>';
var widget = $('<div id="layer-control" class="sidebar-widget">' + layerHtml + '</div>');

widget.on('click', 'input[type="radio"]', function (e) {

    var was_Active = $(this).prop('checked');
    var value = $(this).val();
    if (was_Active) {
        layers[value].addTo(self.baseMap);
    }
    else {
        self.baseMap.removeLayer(layers[value]);
    }
});

Answer 1

首先，关于带有radio元素的当前代码，正如@Aswin Ramesh告诉你的，你应该添加name属性。 来自MDN ：

通过为组中的每个单选按钮赋予相同的名称来定义单选组。 建立单选组后，选择该组中的任何单选按钮会自动取消选择同一组中的任何当前选择的单选按钮。

除了形状（圆形与方形）之外，这是radio和checkbox元素之间的唯一区别。 因此，考虑到行为类似于单选按钮的复选框可能会让用户感到困惑。

也就是说，如果您真的想在复选框上复制该功能，请使用 JavaScript 取消选择所有元素，但引发click事件的元素除外。

 $('#checkboxes').on('click', ':checkbox', function(e) { $('#checkboxes :checkbox').each(function() { if (this != e.target) $(this).prop('checked', false); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="radios"> <input type="radio" name="rOptions" value="radio1" checked> <input type="radio" name="rOptions" value="radio2"> <input type="radio" name="rOptions" value="radio3"> </div> <div id="checkboxes"> <input type="checkbox" value="checkbox1" checked> <input type="checkbox" value="checkbox2"> <input type="checkbox" value="checkbox3"> </div>

注意：您忘记关闭<li>标签。