js中点击按钮切换图片

最新推荐文章于 2023-11-16 18:50:49 发布

成长的小码农

最新推荐文章于 2023-11-16 18:50:49 发布

阅读量1w

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/zhs954838550/article/details/8806163

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

        // 换图片简单方法
//        function updatepic(radio) {
//            document.getElementById('pic1').setAttribute('src', 'image/' + radio.getAttribute('value') + '.jpg');
//        }
        //换图片复杂方法第二种
        function UpdateImg() {
            //document.getElementById('img1').setAttribute('src', 'images/2.jpg');
            var dogandcat = document.getElementsByName('dogandcat'); //获取所有name=dogandcat的单选按钮
            for (var i = 0; i < dogandcat.length; i++) {
                if (dogandcat[i].checked == true) {
                    var value = dogandcat[i].getAttribute('value');
                    switch (value) {
                        case '2':
                            document.getElementById('img1').setAttribute('src', 'images/2.jpg');
                            break;
                        case '3':
                            document.getElementById('img1').setAttribute('src', 'images/3.jpg');
                            break;
                        case '4':
                            document.getElementById('img1').setAttribute('src', 'images/4.jpg');
                            break;
                        case '6':
                            document.getElementById('img1').setAttribute('src', 'images/6.jpg');
                            break;
                    }
                }
            }
        }
    </script>
</head>
<body>

    <input type="button" value="换图片" οnclick="updatepic()" />
    <img src="image/9.jpg" id='pic1' οnclick="updatepic()"/>
    <input id="Radio1" type="radio" name='dogandcat' value="2" οnclick="updatepic(this)"/>忧伤的小狗
    <input id="Radio2" type="radio" name='dogandcat' value="3" οnclick="updatepic(this)"/>卖萌的小狗
    <input id="Radio3" type="radio" name='dogandcat' value="4" οnclick="updatepic(this)"/>愤怒的小狗
    <input id="Radio4" type="radio" name='dogandcat' value="6" οnclick="updatepic(this)"/>惊讶的小猫

</body>
</html>

成长的小码农

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中点击按钮切换图片

http://www.w3.org/1999/xhtml"> // 换图片简单方法// function updatepic(radio) {// document.getElementById('pic1').setAttribute('src', 'image/' +
复制链接

扫一扫