zoukankan      html  css  js  c++  java
  • 单选框单击取消选中

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

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

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

    有如下考虑:

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

  • 相关阅读:
    第10组 团队展示
    第一次结对编程作业
    13.Vue.js 组件
    12.Vue.js 表单
    11.Vue.js-事件处理器
    10.Vue.js 样式绑定
    9.Vue.js 监听属性
    8.Vue.js-计算属性
    7.循环语句
    6.Vue.js-条件与循环
  • 原文地址:https://www.cnblogs.com/ylws/p/3548104.html
Copyright © 2011-2022 走看看