需求如下，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. java多线程中的调度策略

    两种线程的调度模式: 抢占式调度: 抢占式调度指的是每条线程执行的时间.线程的切换都由系统控制,系统控制指的是在系统某种运行机制下,可能每条线程都分同样的执行时间片,也可能是某些线程执行的时间片较长, ...

  2. jenkins部署安装

    http://www.cnblogs.com/lzcys8868/p/6286727.html

  3. Tomcat配置及不依赖IDEA部署web应用

    http:tomcat.apache.org 下载tomcat文件包 我使用的tomcat9的版本 Tomcat9014使用的是Servlet4.0 解压即可,目录如下 bin :启动和关闭tomca ...

  4. 基于ZYNQ的双核启动与通信问题解决

    1    处理器间的通信 为AMP 设计创建应用之前,您需要考虑应用如何进行通信(如有需要).最简单的方法是使用片上存储器.Zynq SoC 配备256KB 的片上SRAM,可从以下四个源地址进行访问 ...

  5. [转载] java多线程总结（二）

    转载自:http://www.cnblogs.com/lwbqqyumidi/p/3817517.html 作者:Windstep 四.Java多线程的阻塞状态与线程控制 上文已经提到Java阻塞的几 ...

  6. mysql 性能监控

    1.监控thread_cache命中率admin@localhost : (none) 07:51:20> show variables like '%thread%';+----------- ...

  7. java多态——基础

    多态 定义: 一个接口,多种实现,就是多种状态     价值: 特点:多态存在的特点,就是必须要有继承.覆盖.父类变量调用子类对象 场景: 首先检查父类中是否有该方法,如果没有,则编译错误:如果有,则 ...

  8. php:数组与json数据相互转换

    1.数组转json $json=json_encode(数组名) 数组转json字符串 2,json转数组 $arr=json_decode(json字符串,[true]) 不加true第一次转直接转 ...

  9. ES6 模板字符串Template String

    1. 模板字符串简介: 顾名思义,模板字符串是用来定义一个模板是使用的,就像Vue,React中的template语法. 首先,先来了解一下template string的基本用法: 在ES5中,我们 ...

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

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