表单的radio box toggle其checked值

最新推荐文章于 2024-07-12 15:11:33 发布

tqtiwvfdn

最新推荐文章于 2024-07-12 15:11:33 发布

阅读量910

点赞数

分类专栏： Web 前端 JQuery JavaScript

本文链接：https://blog.csdn.net/tqtiwvfdn/article/details/46728559

版权

前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Web

19 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

本文介绍了一种使用jQuery和原生JavaScript来增强Radio按钮交互性的方法。通过监听键盘和鼠标事件来改变Radio按钮的状态，并确保触发change事件。代码示例展示了如何为Radio按钮添加keyup、mouseup及change事件监听器。

摘要由CSDN通过智能技术生成

jQuery方法基于1.8.3

代码：

   var radio = document.getElementById('myRadio'),
            container = document.getElementById('container'),
            str = '';

        addRadio(radio);
        //addRadioInjQuery('#myRadio');


        //原生的实现方法
        function addRadio(element) {
            /*键盘更改部分*/
            element.addEventListener('keyup', function (e) {
                if ((e.which || event.keyCode) === 32) {
                    //isChecked记录radio应该变成的状态，
                    //this.checked=!this.checked触发change事件
                    this.isClicked = this.checked = !this.checked;
                }
            }, false);

            /*鼠标部分*/
            element.addEventListener('mouseup', function (e) {
                this.isClicked = this.checked = !this.checked;
            }, false);
            element.addEventListener('change', function (e) {
                this.checked = this.isClicked;
            }, false);
        }

        //jQuery实现方法
        function addRadioInjQuery(selector) {
            $(selector).keyup(function (e) {
                if ((e.which || event.keyCode) === 32) {
                    this.isClicked = this.checked = !this.checked;
                }
            }).mouseup(function (e) {
                this.isClicked = this.checked = !this.checked;
            }).change(function (e) {
                this.checked = this.isClicked;
            });
        }