ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

单选框单击取消选中

2021-10-28 14:29:59  阅读:401  来源: 互联网

标签:checked target 单击 单选框 选中 radio event


单选框,选中之后是无法取消选择的,必然有选中项。

如果为必填项,不会存在问题,实际情况是:有可能是非必填项,现在想取消选择。

客户实际是配置了一项‘未知’来表示无值的情况。

有如下考虑:

1.改为下拉框,添加一项‘请选择’,特定值,后台过滤。

2.改为多选框,通过js限制只能选一项。

3.单击选中的单选框,取消选中。

想当然的代码

1

2

3

4

5

$("input[type='radio']").click(function () {

        if (this.checked) {

            this.checked = false;

        }

});

  结果是,单选框无法选中。每次点击单选框的时候,系统自带的事件已经触发,所以每次判断checked属性都为true。

后来发现可以通过ondblclick事件实现,双击取消选中。

1

2

3

$("input[type='radio']").dblclick(function () {      

            this.checked = false;

});

  功能是实现了,但是能不能通过单击实现??

在stackoverflow上找到jQuery check/uncheck radio button onclick,思路为通过onmousedown在onclick事件之前,设置一个标志位。

通用代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

document.body.onmousedown = function (event) {

    event = event || window.event;

    var target = event.target || event.srcElement;

    if (target.type === 'radio') {

        target.previousValue = target.checked;

    }

}

document.body.onclick = function (event) {

    event = event || window.event;

    var target = event.target || event.srcElement;

    if (target.type === 'radio') {

        if (target.previousValue) {

            target.checked = false;

        }

    }

}

  此处没有使用jquery,绑定事件可能导致覆盖原来的事件,酌情修改。

标签:checked,target,单击,单选框,选中,radio,event
来源: https://blog.csdn.net/AE_yang/article/details/121013522

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有