用js写出一个漂亮的单选框选中效果

一般的input框比较简单，我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果

首先需要有个图片素材，当页面加载的时候是背景图片定位到左图，当我们点击图片的时候，背景图片定位到右图

 

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <style type="text/css">
            
            
        .check_box{
            height: 20px;
            width: 20px;
            display: block;
        
            background: url("images/shop-icon.png") no-repeat;
            background-size: 50px 100px;
        }
        /*属性选择器*/
        .check_box[checked]{
            background-position: -25px 0;
        }
        </style>
    </head>
    <body>        
            <span class="check_box"></span>
  
        <script type="text/javascript">
            var checkBtn = document.getElementsByClassName('check_box');
            for(var j = 0 ; j < checkBtn.length; j++){
                checkBtn[j].onclick = function(){
                    var hasChecked = this.getAttribute('checked');
                    if(hasChecked !== null){
                        this.removeAttribute('checked');
                    }else{
                        this.setAttribute('checked',' ');
                    }
                }
            }
        </script>

    </body>
</html>
复制代码

 

posted @   三线码工  阅读(1548)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示