单选按钮选中后取消

单选按钮选中后不能取消,用以下方法可实现点击取消点击选中,但是有一个问题如果默认是选中的单选按钮,第一次点击不会取消选中,需要点击两次才会取消选中。

	$("input[type='radio']").click(function(e) {
         // radioClick(e);
         // 以下代码更简短
        var domName = $(this).attr('name');
        var $radio = $(this);
        if ($radio.data('waschecked') == true) {
            $radio.prop('checked', false);
            $("input:radio[name='" + domName + "']").data('waschecked', false);
        } else {
            $radio.prop('checked', true);
            $("input:radio[name='" + domName + "']").data('waschecked', false);
            $radio.data('waschecked', true);
        }
    });

    function radioClick(event) {
        let domName = $(event.target).prop('name');
        let hasChild = $(event.target).hasClass('hasChild')
        let $radio = $(event.target);
        if ($radio.data('waschecked') == true) {
            $radio.prop('checked', false);
            $("input:radio[name='" + domName + "']").data('waschecked', false);
            if (hasChild) {
                let innerName = $radio.parent('label').find('input.innerInput').prop('name');
                $radio.parent('label').find('input.innerInput').prop('checked', false);
                $("input:radio[name='" + innerName + "']").data('waschecked', false);
            }
            // $radio.data('waschecked', false);
        } else {
            $radio.prop('checked', true);
            $("input:radio[name='" + domName + "']").data('waschecked', false);
            $radio.data('waschecked', true);
            if (hasChild) {
                let innerName = $radio.parent('label').find('input.innerInput').prop('name');
                $("input:radio[name='" + innerName + "']").data('waschecked', false);
                $radio.parent('label').find('input.innerInput').eq(0).prop('checked', true);
                $radio.parent('label').find('input.innerInput').eq(0).data('waschecked', true);
            }
        };
    }

相关推荐

  1. 按钮选中取消

    2024-05-09 20:54:06       38 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-09 20:54:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-09 20:54:06       101 阅读
  3. 在Django里面运行非项目文件

    2024-05-09 20:54:06       82 阅读
  4. Python语言-面向对象

    2024-05-09 20:54:06       91 阅读

热门阅读

  1. 解析React Hooks的工作原理与影响

    2024-05-09 20:54:06       34 阅读
  2. 【js开发记录笔记】js开发记录笔记

    2024-05-09 20:54:06       27 阅读
  3. 【LeetCode题库】197. 上升的温度 —— 连接查询

    2024-05-09 20:54:06       37 阅读
  4. 深度学习中的backbone特征提取器

    2024-05-09 20:54:06       31 阅读
  5. 英语单词学习

    2024-05-09 20:54:06       25 阅读
  6. 设计模式学习1

    2024-05-09 20:54:06       30 阅读
  7. Edge浏览器的使用心得与深度探索

    2024-05-09 20:54:06       32 阅读
  8. Spring

    Spring

    2024-05-09 20:54:06      28 阅读
  9. 数据结构队列学习

    2024-05-09 20:54:06       32 阅读
  10. vue项目开发流程

    2024-05-09 20:54:06       35 阅读