需求如下，radio已经选中，再点击，取消选中状态。

效果如链接：演示地址

直接上代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <input type="radio" name="sex" id="sex1" value="1"><label for='sex1'>男</label>

        <input type="radio" name="sex" id="sex0" value="0"><label for='sex0'>女</label>

        <script>

            var selectID = null;

            var els = document.querySelectorAll("[name=sex]")

            for (el of els) {

                el.addEventListener("click", function() {

                    if (selectID == this.id && selectID) {

                        this.checked = ""

                        selectID = null;

                    } else {

                        selectID = this.id;

                    }

                })

            }

            function GetRadioValue(radioName) {

                var radios = document.getElementsByName(radioName);

                for (var i = 0; i < radios.length; i++) {

                    var radio = radios.item(i);

                    if (radio.checked) {

                        return radio.value;

                    }

                }

            }

        </script>

    </body>

</html>

原生JS实现选中的radio变为未选中的更多相关文章

  1. （转）jquery serialize表单序列化，当radio或checkbox 未选中时，没有序列化到对象中的原因分析和解决方案 - ghostsf

    相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...

  2. Jquery Mobile下设置radio控件选中

    问题: .html文件头部引入了: <script src="js/jquery.js"></script> <script src="js ...

  3. JS----checked----checked选中和未选中的获取

    , allValue.length - 1); allValue = allValue.replace(/[ ]/g, ""); var checkedIds = allValue ...

  4. 在js中取选中的radio值

    在js中取选中的radio值 <input type="radio" name="address" value="0" /> & ...

  5. jquery 设置checked="checked"无效，radio未选中。。

    jquery 设置checked="checked"无效,radio未选中.. 最好还是使用.prop(),在jQuery1.6版本之前.attr存在一些bug.在1.6之后它会自 ...

  6. 折腾一天，获取下列多选框的所有选中值，原生js可直接通过obj.val()来获取，可jq不行，要通过循环取值来获取;

    折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

  7. JS 如何获取radio或者checkbox选中后的值

    废话不多说,直接上代码: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. 原生js实现选中所有的checkbox

    <div class="con"> <input name='多选项名称' type='checkbox' value='' id="all" ...

  9. checked="checked"无效，radio未选中问题排查

    在使用attr给元素设置属性的时候,但是显示在页面就是未选中,而且是只使用一两次是ok的,但是连着多使用就不起作用了,百度了下,发现遇到这个问题的人还蛮多的, 有人说,发现在jQuery1.6版本之后 ...

随机推荐

  1. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  2. 从输入URL按下回车到页面展现，中间发生了什么？

    从输入URL按下回车到页面展现,总的来说发生了一下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器 ...

  3. 关于IEDA中的字母与数字的坑

    今天写一个demo,环境是在IDEA下写的,遇到一个关于字母与数字完全一样的坑 在jsp页面中有一个input是这样的 <input type="file" name=&qu ...

  4. Strongly connected components

    拓扑排列可以指明除了循环以外的所有指向,当反过来还有路可以走的话,说明有刚刚没算的循环路线,所以反过来能形成的所有树都是循环

  5. Vue中使用mui方法

    第一步 下载 下载网址:http://dev.dcloud.net.cn/mui/ui/ 点击GitHub进行下载 第二步 Vue中引入Mui 将下载好的文件解压 把文件中dist中的三个文件复制到自 ...

  6. wxPython制作跑monkey工具（python3）-带事件百分比显示界面

    一. wxPython制作跑monkey工具(python3)-带事件百分比显示界面  源代码 Run Monkey.py #!/usr/bin/env python import wx import ...

  7. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

  8. D1 java概述

    首先扯点别的.在学习知识的过程中非常重要的一点是沟通交流,拿自学java来说绝不是抱着一本Head First Java闷头看.感觉自学入门这一阶段相当于启蒙,绝不能向无头苍蝇一样到处乱撞.java的 ...

  9. Jmeter接口测试+压力测试

    链接推荐:https://blog.csdn.net/github_27109687/article/details/71968662

  10. javascript 之 继承

    1.传统方式--->原型链  (过多继承了没用的属性) Grand.prototype.lastname = 'zhang' function Grand(); } var grand = ne ...