原生JS实现选中的radio变为未选中

本文转载自查看原文 2019-01-09 11:23 1702 javascript

需求如下，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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 在JS中设置Select和radio选中 js设置radio单选框值选中【前端JS】radio 可单选可点击取消选中原生js实现全选和反选以及任意一个未被选中的效果点击文字同时选中checkbox radio按钮 label实现 CSS实现checkbox radio 选中后文本颜色改变文字选中的js实现关于radio选中或者反选 angularjs如何默认选中radio angularjs radio 默认选中