首页 > 其他分享 >单选框单击取消选中

单选框单击取消选中

时间:2023-06-29 15:34:58浏览次数:40  
标签:checked target 单击 单选框 选中 radio event

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

标签:checked,target,单击,单选框,选中,radio,event
From: https://www.cnblogs.com/Dongmy/p/17514324.html

相关文章

  • el-table 全选框 默认样式为文字 滑动变成单选框
    /deep/.el-table__header-wrapper.el-checkbox{width:55px;.el-checkbox__input{display:none;}&:hover{.el-checkbox__input{display:block;}&::before{displa......
  • css屏蔽图片长按选中下载
    在移动端开发中,我们通常不希望页面的图片被长安选中可下载,会禁用图片选中事件,这时,css不能使用通配符全局设置 pointer-events:none; 否则会把所有点击事件禁用。解决方案img{box-sizing:border-box;-moz-user-select:none;-webkit-user-select:none;-ms-us......
  • CSS :last-child选中不了元素
    1.情况:当div:finaincingMark-right-item后还有div:sliderLine时,使用finaincingMark-right-item:last-child无法选中finaincingMark-right-item遍历后的最后一个div:finaincingMark-right-item,同时也没选中div:sliderLine,样式并不能选中任何一个div 2.解决:使div:finaincingMark-righ......
  • TreeSelect 树形选择 选中子级显示所有父级及本身
    由于需求的需要,需要在选中二级的时候,将全部路径完整的在输入框显示:如图所示 看了一下,tree自带的属性没有此功能,经过一番思考,直接可以给绑定的model赋值的操作实现,代码如下:<template><el-tree-select:disabled='props.disabled'ref='treeRef'node-key='value':props="t......
  • 破除网页禁止选中辅助
     转自知乎解除网页禁止复制,复制粘贴没烦恼。-知乎(zhihu.com)......
  • ElementUI 获取table中选中的行的两种方式
    Element获取table中选中的行的两种方式<el-tableref="multipleTable":data="data"style="width:100%"border@selection-change="selectionLineChangeHandle"></el-table>   //数据保存data(){return{dataonLineLi......
  • 为什么《七周七语言》选中的是这几种语言?
    从众多语言中,挑出本书包含的几门语言,这一过程也许不像你想得那么复杂。我们只不过发了些调查问卷,向本书的潜在读者请教了一番。调查数据汇总上来时,有八门语言入选希望最大。不过,我先是把JavaScript“踢”了出去,因为它实在是过于热门了,取而代之的是原型语言中热门程度仅次于JavaScri......
  • excel2016选中单元格怎么高亮显示选中的行和列
    excel2016怎么高亮显示选中的行和列第一步:首先我们在电脑上用excel2016打开要编辑的表格,然后选中要整个表格的数据区域第二步:接下来依次点击开始工具栏上的“条件格式/新建规则”菜单项。接着在打开的新建格式规则的窗口中,我们选中“使用公式确定要设......
  • lettuce+redisTemplate实现redis单击和集群的整合
    lettuce+redisTemplate实现redis单击和集群的整合Springboot整合redis是非常方便的,大致包含如下四部分pomstart相关jar的引入properties/yaml基础配置信息configbean的initbean的注入及使用如果遇到网上的自动装配的实例直接跳过吧,哪怕再小的公司,密码也会加密处理......
  • Fabric.js 选中元素不置顶(防止显示到顶层挡住其它元素)
     初始化画布的时候把preserveObjectStacking的属性改成true,默认是false this.canvas=newfabric.Canvas('mycanvas',{preserveObjectStacking:true}); 其它【Fabric.js元素被遮挡的部分也可以操作 】觉得很有用,记录一下,原地址:Fabric.js元素被遮挡的部分也......