首页 > 代码库 > ckeckbox的默认样式，label for添加toggle后失效，美化checkbox

ckeckbox的默认样式，label for添加toggle后失效，美化checkbox

2024-08-21 07:02:22   235人阅读

首先要来吐槽一下火狐浏览器，缓存还是记住的checkbox的状态怎么样的。反正我先打开网页，再修改checkbox，添加一个checked true，默认选中，刷新火狐的页面，竟然没有效果，用其他浏览器测试都有效果。。。。火狐要关闭当前网页，再打开才行，坑。。。。。我测试在其他浏览器中修改checked，然后刷新页面，其他浏览器都可以看到修改后的状态，唯独，火狐，，，要关闭页面再打开才行。。。。

 

再说一个，之所以for绑定表单的原理是，绑定了点击事件，触发了表单中元素的点击事件，所以我想在一个label中，天假jquery的toggle事件，在点击的时候，变换背景，同时用for来绑定checkbox,然后我发现for表单的绑定失效（jquery1.8.3）.。。估计jquery中的toggle事件，不是用事件绑定的方式来添加事件的，所以覆盖了默认的事件。而我用on()添加事件，不可以实现了，代码如下：

<head>
    <meta content="" charset="utf-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        input[type="checkbox"]{
            /*display: none;*/

        }
        label{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #9ca0a6;
        }

    </style>
    <script type="text/javascript">
        $(function(){

            cb.add_listen();





        });

        var cb={
            check:false,
            add_listen:function(){
                var self=this;
                $("label").on("click",function(){
                    if(self.check){
                        $(this).css({"background-color":""});
                        self.check=false;
                    }else {
                        $(this).css({"background-color":"green"});
                        self.check=true;
                    }

                });


            }


        }

    </script>
</head>
<body>
    <input type="checkbox" id="cb" ><label for="cb"></label>
</body>

效果如下：

技术分享技术分享

此处，没有让复选框居中，居中先撇开不说。

现在，将checkbox隐藏display:none，用laibel来代替，checkbox的状态显示；display为none的元素虽然，看不到，无法触发鼠标事件，也无法获取宽高位置等，但是存在文档结构中，他们的状态是可以获取，并且别改变的，除了看不到，和不占空间外，他们还是一样真实真实存在的。。。

代码修改如下：

<head>
    <meta content="" charset="utf-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        input[type="checkbox"]{
            display: none;

        }
        label{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #9ca0a6;
        }

    </style>
    <script type="text/javascript">
        $(function(){

            cb.add_listen();

            $("#cb").on("change",function(){
                console.log($("#cb").prop("checked"));

            })



        });

        var cb={
            check:false,
            add_listen:function(){
                var self=this;
                $("label").on("click",function(){
                    if(self.check){
                        $(this).css({"background-color":""});
                        self.check=false;

                    }else {
                        $(this).css({"background-color":"green"});
                        self.check=true;

                    }

                });


            }


        }

    </script>
</head>
<body>
    <input type="checkbox" id="cb" ><label for="cb"></label>
</body>

第一次点击，变成选中

技术分享

再点击一下：

技术分享

。。。这里只用了背景色，在实际过程中，可以用背景图片来代替label的背景色，这种思路可以取代checkbox默认的，且无法修改的样式。　　　　

ckeckbox的默认样式，label for添加toggle后失效，美化checkbox


联系
我们