radio 可单选可点击取消选中

前提

普通情况下 radio 单选框仅仅能实现多选一的效果,可是一旦选择当中一个后,这个单选框就不可点击取消其选中状态了。

解决

    //单个raido点击切换
    $.each($("input:radio"), function(){
        var that = this;
        var hasClass = $(that).prop('waschecked');
        if (typeof hasClass === 'undefined') {
            var isChecked = $(that).prop('checked');
            console.log('isChecked', isChecked)
            // 如果当前单选按钮是选中状态，取消其选中状态
            if (isChecked) {
                $(that).prop('waschecked', true);
            } 
            else {
                $(that).prop('waschecked', false);
            }
        }
    })
    $("input:radio").on('click', function(){
        var that = this;
        setTimeout(function() {
            //获取当前单选框控件name 属性值
            var domName = $(that).attr('name');
            // // 如果之前是选中状态，则取消选中，否则选中当前按钮
            if ($(that).prop('waschecked')){
                $(that).prop('waschecked', false);
                $(that).prop('checked', false);
            } 
            else {
                $(that).prop('waschecked', true);
                $(that).prop('checked', true);
            }
            console.log($(that).prop('checked'));
        }, 0);
    });

注意：

• 在 Firefox 中，因为 checked 属性是布尔属性，它在 HTML 中不应有值。对于布尔属性，attr 方法返回的值可能与预期的不一致。应该使用 .prop() 方法来获取和设置。
• 单选按钮（radio button）是互斥的，属于同一组的单选按钮只能有一个被选中，并且无法取消已经选中的按钮。需要自定义属性来判断。