用js寫出一個漂亮的單選框選中效果

本文轉載自查看原文 2020-05-01 19:22 957 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 layui 單選框選中事件 layui 單選框選中事件 input type=radio 判斷單選框選中 layui 獲取radio單選框選中的值 EasyUi datagrid 單選框選中事件 CSS 修改 input 單選框選中的顏色 JS判斷單選框是否選中只有一個radio的單選框如何在選中后取消選中單選框的選中事件 jquery怎么根據后台傳過來的值動態設置下拉框、單選框選中