需求如下，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. 自己动手写CPU——寄存器堆、数据存储器（基于FPGA与Verilog)

    上一篇写的是基本的设计方案,由于考研复习很忙,不知道下一次什么时候才能打开博客,今天就再写一篇.写一写CPU中涉及到RAM的部件,如寄存器堆.数据存储器等. 大家应该在大一刚接触到计算机的时候就知道R ...

  2. pdf.js使用总结#如何在网页读取并显示PDF格式文档

    pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核 ...

  3. db2 常见错误以及解决方案[ErrorCode SQLState]

    操作数据库流程中,遇到许多疑问,很多都与SQL CODE和SQL State有关,现在把一个完整的SQLCODE和SQLState不正确信息和有关解释作以下说明,一来可以自己参考,对DB2不正确自行找 ...

  4. day 14 三元运算符，列表字典推导式，递归，匿名函数，内置函数（排序，映射，过滤，合并）

    一.三元运算符 就是if.....else..... 语法糖 前提:if和else只有一条语句 #原始版 cmd=input('cmd') if cmd.isdigit(): print('1') e ...

  5. 性能测试LR学习笔录 -2

    LoadRunner基本测试流程: 制定性能测试计划(部分)  -> 创建测试脚本 -> 编译.运行测试脚本 -> 创建场景 - > 运行.监控场景.收集数据  -> 生 ...

  6. tuxedo 提供buildserver命令编译服务器进程

    转自:http://blog.sina.com.cn/s/blog_5413cc0f0100nbgc.html 事实上buildserver只完成预编译,它会调用当前操作系统中已经安装的默认C编译器来 ...

  7. 模块四-shutil模块

    shutil模块 高级的文件处理模块 主要是文件的处理,移动,压缩和解压缩 shutil模块的使用方法: shutil.copyfile()#拷贝文件 shutil.copy()#拷贝文件和权限 sh ...

  8. ios12更新开发者需要做的

    1.StatusBar内部结构改变 现象:crash crash log: -[_UIStatusBarIdentifier isEqualToString:]: unrecognized selec ...

  9. 基本的java加密算法MD5等等

    简单的java加密算法有: BASE64       严格地说,属于编码格式,而非加密算法 MD5             (Message Digest algorithm 5,信息摘要算法) SH ...

  10. govendor 无法添加.h文件

    例如:github.com\ethereum\go-ethereum\crypto\secp256k1 是一个CGO项目 通过govendor add +external只能引入secp256k1下的 ...