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

Posted 三线码工

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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>

 

以上是关于用js写出一个漂亮的单选框选中效果的主要内容，如果未能解决你的问题，请参考以下文章

javascript 怎么获得单选框值

WPF中将RadioButton的单选框画成方框

JS实现单选按钮回显时页面效果出现，但选中单选框的值为空

在winform中如何获取两个单选框中选中的那个值

checbox复选框实现radio单选框的单选功能

js实现元素的多选,或单选功能