单选框单击取消选中

https://blog.csdn.net/AE_yang/article/details/121013522

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

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

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

有如下考虑：

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，绑定事件可能导致覆盖原来的事件，酌情修改。