Question

基本上我试图在JavaScript中动态添加单选按钮。这是代码：

function addToFilterBox(content, layerInfo) {
    console.log("checked = " + layerInfo.checked);
    content.text += "<tr><td><input class=\"" + layerInfo.id + "\" type=\"radio\" onclick=\"toggleOverlayer('" + layerInfo.id + "')\" ";

    if (layerInfo.checked == "1") {
        content.text += "checked='checked'";
    } 
    content.text += ">" + layerInfo.label + "</td></tr>" + "<tr><td><div id=\"" + layerInfo.id + "\"></div></td></tr>";
};

我目前的情况是单选按钮允许多项选择，一旦选中，就无法取消选择。我想知道如何限制每次选择一个单选按钮。提前谢谢。

修改

    function toggleOverlayer(id){
if ($("."+id).prop("checked")) {
    showOverlayer(id);
} else {
    hideOverlayer(id);
}
}

function showOverlayer (id){
    var dynamap = overlayObjects[id];

    if (dynamap == undefined || dynamap == null || !dynamap) {
        loadMapService(id, 0.8);
    }

    dynamap = overlayObjects[id];

    dynamap.setMap(map);

    createSlider(id);
    $("#"+id).show();

    google.maps.event.addListenerOnce(dynamap.getMapService(), 'load', function() {
        dynamap.getMapService().layers[duNameDic[id]].visible = true;
        dynamap.refresh();
    });
}

function hideOverlayer(id){

    var dynamap = overlayObjects[id];

    dynamap.setMap(null);

    $("#"+id).hide();   

    google.maps.event.addListenerOnce(dynamap.getMapService(), 'load', function() {
        dynamap.getMapService().layers[duNameDic[id]].visible = false;
        dynamap.refresh();
    });
}

Answer 1

为您的单选按钮指定名称属性，并使所有名称都具有相同的值。

function addToFilterBox(content, layerInfo) {
console.log("checked = " + layerInfo.checked);
content.text += "<tr><td><input class=\"" + layerInfo.id + "\" type=\"radio\" onclick=\"toggleOverlayer('" + layerInfo.id + "')\" name=\"group\" ";

if (layerInfo.checked == "1") {
content.text += "checked='checked'";
} 
content.text += ">" + layerInfo.label + "</td></tr>" + 
    "<tr><td><div id=\"" + layerInfo.id + "\"></div></td></tr>";
}

Answer 2

单一选择你需要使用onclick事件处理程序＆amp;在onclick中你应该禁用按钮。

function addToFilterBox(content, layerInfo) {
console.log("checked = " + layerInfo.checked);
content.text += "<tr><td><input name=\"chkbx\" class=\"" + layerInfo.id + "\" type=\"radio\" onclick=\"clickHandle(this,\""+layerInfo.id+"\");\" ";

if (layerInfo.checked == "1") {
content.text += "checked='checked'";
} 
content.text += ">" + layerInfo.label + "</td></tr>" + 
    "<tr><td><div id=\"" + layerInfo.id + "\"></div></td></tr>";
};

function clickHandle(ele,layerid){
   $(ele).attr('disabled', 'disabled');
$( "[name='chkbx']" ).each(function( index, element ){hideOverlayer($(this).attr('class'));});
    toggleOverlayer(layerid);
   //Put anycode here ele is clicked item
}

单选按钮允许在JavaScript中进行多项选择

2 个答案: