radio 单选可取消

最新推荐文章于 2024-01-12 02:00:34 发布

原创最新推荐文章于 2024-01-12 02:00:34 发布 · 775 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

JAVA WEB菜鸟专栏收录该内容

21 篇文章

订阅专栏

本文探讨了在使用jQuery处理HTML radio按钮时，如何通过结合attr和prop属性来实现取消选中功能的常见问题及解决方案。作者亲测prop获取checked状态和attr设置checked行为不一致，推荐使用attr记录选中状态，prop进行实际设置，以确保正确操作并避免常见问题。

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

radio可取消操作，需要手动处理。网上的争论无非就是attr和prop的使用

亲测都有问题（比如多次选中取消不生效，有时需要点击两次才能选中等等），

关键点就是

.prop获取checked达不到预期

.attr设置checked达不到预期得等

这里结合使用就没问题了（划重点：attr用来记录获取，prop用来设置）

html:

<label class="col-sm-2 control-label"><span style="color: red;margin-top:3px;"></span>选项</label>
<div class="col-sm-4">
    <div class="checkbox-inline" style="margin-left:0px">
        <input  type="radio" id="xx1"  name="xx" value="1" <c:if test="${xx.xx1 eq 'Y'}"> checked </c:if> style="font-size: 17px"/>选项1
    </div>
    <div class="checkbox-inline" style="margin-left:0px">
        <input  type="radio" id="xx2" name="xx" value="2" <c:if test="${xx.xx2 eq 'Y'}"> checked </c:if> style="font-size: 17px"/>选项2
    </div>
</div>

js:

$(document).ready(function () {
    $("input:radio[name=xx]").click(function(){
        var domName = $(this).attr('name');//获取当前单选框控件name 属性值
        var checkedState = $(this).attr('checked');//记录当前选中状态
        $("input:radio[name=xx]").attr('checked',false);
        $(this).prop('checked',false); //3.
        if(checkedState == 'checked'){
            $(this).prop('checked',false); //3.
            $(this).attr('checked',false); //3.
        }else{
            $(this).prop('checked',true); //3.
            $(this).attr('checked','checked'); //3.
        }
    });
  
});