您的位置：首页 > Web前端 > CSS

单选框、多选框样式美化

2015-11-30 15:19 627 查看

<!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>

原文地址：http://www.cnblogs.com/asqq/archive/2012/08/06/2804766.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航