浏览器后退返回后单选radio,多选checkbox等input的值不同问题

浏览器后退返回后单选radio,多选checkbox等input的值不同问题.

单选框选中后跳转页面再返回,不同浏览器获取到的选中项的值会有不同.

示例代码:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>radio</title>
</head>
<body>
    <form>
        <input type="radio" name="paytype" value="1" checked>1
        <input type="radio" name="paytype" value="2" >2
        <input type="radio" name="paytype" value="3" >3
    </form>
    <input type="button" name="btn" onclick="location.href='https://www.baidu.com/'" value="确定">
    <script type="text/javascript">
        window.onload = function () {
            let objs = document.getElementsByName('paytype');
            for(i=0;i<objs.length;i++){
                if(objs[i].checked){
                    alert(objs[i].value);
                }
            }
        }
    </script>
</body>
</html>

 

如果统一的话增加属性

autocomplete="off"

修改后

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>radio</title>
</head>
<body>
    <form>
        <input type="radio" name="paytype" value="1" checked autocomplete="off" >1
        <input type="radio" name="paytype" value="2" autocomplete="off" >2
        <input type="radio" name="paytype" value="3" autocomplete="off" >3
    </form>
    <input type="button" name="btn" onclick="location.href='https://www.baidu.com/'" value="确定">
    <script type="text/javascript">
        window.onload = function () {
            let objs = document.getElementsByName('paytype');
            for(i=0;i<objs.length;i++){
                if(objs[i].checked){
                    alert(objs[i].value);
                }
            }
        }
    </script>
</body>
</html>

浏览器一致

 

posted @ 2022-12-09 17:37  变形金刚之猩猩将军  阅读(80)  评论(0)    收藏  举报