iCheck插件，设置单选框radio单击选中/取消事件

最新推荐文章于 2021-06-28 11:21:19 发布

子沐0626

最新推荐文章于 2021-06-28 11:21:19 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端Question汇总工作随笔文章标签： jquery

本文链接：https://blog.youkuaiyun.com/pandalee0626/article/details/106194908

前端Question汇总同时被 2 个专栏收录

1 篇文章

订阅专栏

工作随笔

1 篇文章

订阅专栏

本文介绍如何在使用iCheck插件的情况下，实现在单击已选中的单选框时取消其选中状态。通过监听ifClicked事件并修改checked属性，再调用iCheck('update')刷新插件状态，即可达到目的。

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

单选框radio默认只能选中状态，再次点击无法取消，我们可以通过控制当前点击事件的单选框checked属性来控制选中/取消，如果使用了iCheck插件如何实现，iCheck提供了ifClicked事件，可以使用该事件实现我们想要的效果：

<label class="radio-choose">
    <input name="test" value="1"  type="radio" />
    <div class="text">阶段一</div>
</label>

<label class="radio-choose">
    <input name="test" value="2"  type="radio" />
    <div class="text">阶段二</div>
</label>

<label class="radio-choose">
    <input name="test" value="3"  type="radio" />
    <div class="text">阶段三</div>
</label>

使用ifClicked事件：

$(function(){ 

    $('input:radio[name="test"]').on('ifClicked', function(event){
        if($(this).is(":checked")){
            $(this).attr("checked",false);
        }
        $(this).iCheck('update');
    });

});