需求如下，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. 将字符串类型的出生日期转为int类型的年龄

    public static int getAgeByBirthday(String s) { Date birthday = null; SimpleDateFormat format = new S ...

  2. maven profile实现多环境配置

    每次项目部署上线都需要手动去修改配置文件(比如数据库配置,或者一个自定义的配置)然后才能打包,很麻烦,网上找到 maven profile可以完成这个工作,记录如下: 环境:eclipse + spr ...

  3. 移动端click事件无反应或反应慢 touchend事件页面滑动时频繁触发

    H5页面的点击事件click 无论在浏览器 iframe还是小程序里面 都会出现点击无反应或者反应慢的情况出现 所以决定用touchend事件来代替click 但是touchend事件触发比较灵敏 在 ...

  4. Vue对Html标签应用条件渲染

    我的需求 在flag属性为true时 渲染标签的html为 <input :data-val-required="不能为空"/> 在flag属性为false时 渲染标签 ...

  5. linux 搭建SVN服务端

    搞了个服务器,然后现在想搞点事情,于是乎整个SVN在上面,算是熟悉下svn的操作过程 以下内容转载自: https://yq.aliyun.com/articles/6693 ------------ ...

  6. java面向对象编程(九)--final

    1.final概念 final可以修饰变量或者方法.在某些情况下,程序员可能有以下需求: a.当不希望父类的某个方法被子类覆盖(override)时,可以用final关键字修饰. b.当不希望类的某个 ...

  7. 关于Java方法重载

    今天在做项目的时候发现一个问题,如果有两个方法是重载的,而且他们的参数一个是父类,一个是子类,那么调用的时候会调用哪个函数呢? 做了个测试,发现调用的是子类. 例子: public class Ani ...

  8. xargs处理来之STDIN的输入

    xargs能够将标准输入进行处理,配合下一个命令进行批量处理 #example grep -f go.test ~/jqyou/genedhs_10D |sed '/-1$/d' |awk '{pri ...

  9. 在Linux系统上安装Oracle数据库

    前期准备:我用的是虚拟机上的CentOS 64位系统.所以需要设置网卡,时间,EPEL源,安装一些必备的软件. 1.1在虚拟机上安装好Linux系统后选择虚拟机设置—>网络适配器—>网络连 ...

  10. leetcode 第4题 Median of Two Sorted Arrays

    class Solution { public: double findMedianSortedArrays(vector<int>& nums1, vector<int&g ...