关于火狐浏览器对于radio按钮的缓存问题

最新推荐文章于 2024-09-12 16:11:46 发布

w的小wife

最新推荐文章于 2024-09-12 16:11:46 发布

阅读量118

点赞数

文章标签：缓存前端

本文链接：https://blog.csdn.net/qq_45780736/article/details/134446079

版权

最近在处理一个问题的时候，发现了一个火狐浏览器的兼容性问题，在谷歌浏览器可以正常使用，但是火狐浏览器就会有问题。查询之后发现，原来是火狐浏览器的缓存机制导致的。
在用input写radio按钮时，出现了这个问题，加上这一句代码即可处理！如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理火狐浏览器缓存问题</title>
</head>
<body>
    <input type="radio" name="a" checked="true" id="a">A
    <input type="radio" name="b" id="b">B
    <input type="radio" name="c" id="c">C
    <input type="radio" name="d" id="d">D
    <script>
        const radioButtons = document.querySelectorAll('input[type="radio"]')
        let target = ''
        radioButtons.forEach(function (radioButton) {
            radioButton.addEventListener('click', function (event) {
                const currentName = event.currentTarget.name;
                radioButtons.forEach(function (btn) {
                    if (btn.name !== currentName) {
                        btn.checked = false;
                    }
                });
            });
            // 处理火狐浏览器按钮缓存问题 ｜ defaultChecked 属性表示单选按钮在加载页面时的默认选中状态
            radioButton.checked = radioButton.defaultChecked;
        });
    </script>
</body>

</html>

w的小wife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于火狐浏览器对于radio按钮的缓存问题

最近在处理一个问题的时候，发现了一个火狐浏览器的兼容性问题，在谷歌浏览器可以正常使用，但是火狐浏览器就会有问题。查询之后发现，原来是火狐浏览器的缓存机制导致的。在用input写radio按钮时，出现了这个问题，加上这一句代码即可处理！
复制链接

扫一扫