html单选框反复选中取消

际遇0913

已于 2023-02-20 09:49:25 修改

阅读量758

点赞数

分类专栏： HTML 文章标签： javascript 开发语言 ecmascript

于 2023-02-16 16:18:02 首次发布

本文链接：https://blog.youkuaiyun.com/m0_57329969/article/details/129064354

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

这段代码展示了如何使用HTML创建一组单选按钮，并用JavaScript实现单选功能，即每次只能选择一个选项。函数`sfxz()`用于处理点击事件，确保旧的选择被取消当有新的选项被选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="controls" style="line-height: 40px;">
                                            <#list fsbxlxList as obj>
                                                <label class="checkbox">
                                                    <input  type="radio" value="${obj.id}" name="fslxchecks"  onclick="sfxz()"
                                                        <#if entity?exists && entity.bxlxid?exists>
                                                            <#list entity.bxlxid.split(",") as bxlxid>
                                                                <#if bxlxid?exists && bxlxid=obj.id>checked</#if>
                                                            </#list>
                                                        </#if> />
                                                    ${obj.name}&nbsp;&nbsp;&nbsp;&nbsp;
                                                </label>
                                            </#list>
                                        </div>

废话少说，直接上代码

function  sfxz(){
    var old = null;
    $("input[name='单选框的name的值']").each(function(){
        if(this.checked){
            old = this;
        }
        this.onclick = function(){
            if(this == old){
                this.checked = false;
                old = null;
            } else{
                old = this;
            }
        }
    });
}