jQuery循环渲染单选框后选中新项无法取消旧选中项问题咨询

根因 #

• HTML 原生type="radio"的单选框互斥逻辑依赖相同name属性进行分组，只有同属于一个name分组的单选框才会实现「选中新选项自动取消旧选中态」的效果。你的代码生成的所有单选框都没有设置name属性，每个单选框都属于独立分组，因此会出现多个选项同时被选中的问题。

修复方案 #

修改渲染代码，给所有单选框添加相同的name属性即可，同时可以补充容器清空逻辑，避免多次触发事件重复追加内容：

var networks;
window.addEventListener('networksEvent' , event => {
    networks = event.detail.networks;
    // 先清空原有内容，避免重复追加
    $('#networlist').empty();
    $.each(networks, function( index, network ) {
        $('#networlist').append('<div class="custom-control custom-control-sm custom-radio">'+
           // 新增相同的name属性实现同组互斥
           '<input type="radio" name="selected_network" class="custom-control-input" id="'+network.id+'">'+
            '<label class="custom-control-label" for="'+network.id+'">'+network.name+'</label>'+
        '</div>');
    });
});

内容的提问来源于stack exchange，提问作者Mojtaba Delshad