zoukankan      html  css  js  c++  java
  • 修改checkbox的默认样式

    html 

    <input type="checkbox"/>

    css

    span.myCheck​{    ​​
    •display: inline-block;
    
          13px;
    
         height: 13px;
    
        background-image:url("../images/radio.png");
    
        background-repeat: no-repeat;
    
       cursor: pointer;
    
       background-position: 0px -30px;
    
       margin-right: 3px;
    
       text-align: center;
    
    ​}​
    
    ​span.myCheck.mySelect​{
    
        ​background-position: 0px -45px;
    
    ​}​

    js

         $(function() {
    
           //默认的样式 包裹
    
           $.each($('input[type="checkbox"]'),function(i,n){
    
              $(this).wrap("");
    
                if($(n).attr('checked')){
    
                 $(n).parent('.myCheck').first().addClass('mySelect');
    
                 }
    
             });
    
           //点击后
    
           $('.myCheck').click(function(){
    
            //调用点击事件
    
              $(this).children('input[type="checkbox"]')[0].click(); 
    
            //不可用时
    
            if($(this).children('input[type="checkbox"]').attr("disabled")=="disabled"){
    
                return false;
    
             }      
    
            if($(this).children('input[type="checkbox"]').attr('checked')){
    
               $(this).children('input[type="checkbox"]').removeAttr("checked");
    
               $(this).removeClass('mySelect');
    
            }else{
    
               $(this).children('input[type="checkbox"]').attr('checked','checked');
    
              $(this).addClass('mySelect');
    
            }
    
            //点击全选
    
             按情况处理
    
            });   
    
       });

    实现效果

     

     

     
  • 相关阅读:
    SpringBoot基础
    开始一个新的springboot项目checklist
    五项修炼: 终生学习者
    价值流分析-改进方法论
    伯努利方程
    会计语言
    svg蒙版mask
    从svg到计算机图形学
    xflux 调节屏幕色温
    处理器架构
  • 原文地址:https://www.cnblogs.com/sliuie/p/5091155.html
Copyright © 2011-2022 走看看