51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

css之单选框、多选框样式美化

时间:2017-08-14 15:31点击:

代码如下:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>  
    <title>表单及按钮的美化</title>  
    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>  
    <script type="text/javascript">  
    ;(function($){  
    $.fn.hcheckbox=function(options){  
    $(':checkbox+label',this).each(function(){  
    $(this).addClass('checkbox');  
    if($(this).prev().is(':disabled')==false){  
    if($(this).prev().is(':checked'))  
    $(this).addClass("checked");  
    }else{  
    $(this).addClass('disabled');  
    }  
    }).click(function(event){  
    if(!$(this).prev().is(':checked')){  
    $(this).addClass("checked");  
    $(this).prev()[0].checked = true;  
    }  
    else{  
    $(this).removeClass('checked');  
    $(this).prev()[0].checked = false;  
    }  
    event.stopPropagation();  
    }  
    ).prev().hide();  
    }  
      
    $.fn.hradio = function(options){  
    var self = this;  
    return $(':radio+label',this).each(function(){  
    $(this).addClass('hRadio');  
    if($(this).prev().is("checked"))  
    $(this).addClass('hRadio_Checked');  
    }).click(function(event){  
    $(this).siblings().removeClass("hRadio_Checked");  
    if(!$(this).prev().is(':checked')){  
    $(this).addClass("hRadio_Checked");  
    $(this).prev()[0].checked = true;  
    }  
      
    event.stopPropagation();  
    })  
    .prev().hide();  
    }  
    })(jQuery)  
    </script>  
    <style>  
    label.checkbox {padding-left: 24px; cursor:pointer;background: url(http://www.codefans.net/jscss/demoimg/201105/checkbox.png) no-repeat
left -21px; line-height:22px; height:21px; display:inline-block;}  
    label.checked {background-position:left 100%; }  
    label.disabled{background-position:left 0px;}  
    .hRadio  
    {  
    padding-left: 22px; display: inline-block;  
    background: transparent url(http://www.codefans.net/jscss/demoimg/201105/radio.png) no-repeat left top;  
    height: 19px; line-height:20px;  
    cursor:pointer;vertical-align:middle;  
    }  
    .hRadio_Checked { background-position: left bottom;}  
    </style>  
    <script type="text/javascript">  
    $(function(){  
    $('#chklist').hcheckbox();  
    $('#radiolist').hradio();  
    $('#btnOK').click(function(){  
    var checkedValues = new Array();  
    $('#chklist :checkbox').each(function(){  
    if($(this).is(':checked'))  
    {  
    checkedValues.push($(this).val());  
    }  
    });  
      
    alert(checkedValues.join(','));  
    alert($('#radiolist :checked').val());  
    })  
    });  
    </script>  
    </head>  
      
    <body>  
    <div id="chklist" style="padding:10px; font-size:14px; ">  
    <input type="checkbox" value='1' /><label>aaaaaa</label>  
    <input type="checkbox" value='2' /><label>bbbbbb</label>  
    <input type="checkbox" value='3' /><label>ccccc</label>  
    <input type="checkbox" value='4' /><label>ddddd</label>  
    </div>  
      
    <div id="radiolist" style="padding:10px; font-size:14px; ">  
    <input name='r' type="radio" value='11' /><label>AAAAAA</label>  
    <input name='r' type="radio" value='21' /><label>BBBBBBBB</label>  
    <input name='r' type="radio" value='31' /><label>CCCCCC</label>  
    <input name='r' type="radio" value='41' /><label>DDDDDD</label>  
    </div>  
    <input type="button" value="确定" id="btnOK" />  
    </body>  
    </html>  



51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开