單選框單擊取消選中

單選框，選中之后是無法取消選擇的，必然有選中項。

如果為必填項，不會存在問題，實際情況是：有可能是非必填項，現在想取消選擇。

客戶實際是配置了一項‘未知’來表示無值的情況。

有如下考慮：

1.改為下拉框，添加一項‘請選擇’，特定值，后台過濾。

2.改為多選框，通過js限制只能選一項。

3.單擊選中的單選框，取消選中。

想當然的代碼

$("input[type='radio']").click(function () {
        if (this.checked) {
            this.checked = false;
        }
});

　　結果是，單選框無法選中。每次點擊單選框的時候，系統自帶的事件已經觸發，所以每次判斷checked屬性都為true。

后來發現可以通過ondblclick事件實現，雙擊取消選中。

$("input[type='radio']").dblclick(function () {       
            this.checked = false;
});

　　功能是實現了，但是能不能通過單擊實現？？

在stackoverflow上找到jQuery check/uncheck radio button onclick，思路為通過onmousedown在onclick事件之前，設置一個標志位。

通用代碼

    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，綁定事件可能導致覆蓋原來的事件，酌情修改。