需求如下，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. Codeforces Round #369 (Div. 2) C. Coloring Trees(简单dp)

    题目:https://codeforces.com/problemset/problem/711/C 题意:给你n,m,k,代表n个数的序列,有m种颜色可以涂,0代表未涂颜色,其他代表已经涂好了,连着 ...

  2. Python 函数的描述

    函数 函数是带名字的代码块,用于完成具体的工作. 要执行函数定义的特定任务,可调用该函数.需要在程序中多次执行同一项任务时,你无需反复编写完成该任务的代码,而只需调用执行该任务的函数,让Python运 ...

  3. .Net Core+Angular6 学习 第二部分(创建Angular6项目)

    . 创建angular6 前提: 需要安装nodejs以及angular的脚手架,Angular官网要求Angular6.0必须在node 8.x 和 npm 5.x 以上的版本才能正常使用. 我的版 ...

  4. web前端页面设计小笔记

    input总是在点击的时候出现蓝色边框,这是input的默认属性,就算设置了border:none:也没有用! #解决方法:outline:none; 设置input框里的placeholder值得字 ...

  5. linux之正则

    grep命令: -V      打印grep的版本号 -E      解释PATTERN作为扩展正则表达式,也就相当于使用egrep. -F      解释PATTERN作为固定字符串的列表,由换行符 ...

  6. Open Daylight integration with OpenStack: a tutorial

    Open Daylight integration with OpenStack: a tutorial How to deploy OpenDaylight and integrate it wit ...

  7. 模拟setTimeOut

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. vue添加页面键盘事件

    我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...

  9. python中的 uuid 模块使用示例

    此模块提供不可变的 UUID 对象 (类 uuid) 和函数uuid1().uuid3().uuid4().uuid5(), 用于生成在 RFC 4122 中指定版本1.3.4和5UUIDs .如果你 ...

  10. django 模型操作

    # 添加 Fruit.objects.create(name='Apple') # 更新 UserProfile.objects.filter(user=admin).update(**{'onlin ...