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>标签。

使用JavaScript将Checkbox转换为单选按钮？

1 个答案: