(jQuery)(表单美化一)替换原生的checkbox.radio
时间：2010-08-30 来源：前端开发（想念ling）
为了是自己的系统亦或是网站更加适合自己的设计，表单的美化其实是最重要的一块，如果你是个追求完美的人，跟我一起来开始表单美化之路.
效果图：
思路：
1： 隐藏原先的checkbox,radio;
2：构造自己的checkbox,radio;
3：监听自己的checkbox,radio单击事件,并且同时改变原先checkbox,radio的选中状态。
素材：
页面结构：
<fieldset>
<legend>美化radio</legend>
<input type="button" value="美化radio" id="melradio"/>
<div class="inputDiv"><input type="radio" name="radio" checked="checked"/>男</div>
<div class="inputDiv"><input type="radio" name="radio"/>女</div>
</fieldset>
<fieldset>
<legend>美化checkbox</legend>
<input type="button" value="美化checkbox" id="melcheckbox"/>
<div class="inputDiv"><input type="checkbox" name="radio" checked="checked"/>男</div>
<div class="inputDiv"><input type="checkbox" name="radio"/>女</div>
</fieldset>
CSS样式：
.divRadio{
width:16px;
background:url(radio.png) -174px 0 no-repeat;
float:left;
}
.divRadioCheck{
float:left;
width:16px;
background:url(radio.png) -158px 0 no-repeat;
}
.divCheck{
float:left;
width:16px;
background:url(checkbox.png) -16px 0 no-repeat;
}
.divCheckBox{
float:left;
width:16px;
background:url(checkbox.png) 0 0 no-repeat;
}
fieldset{
border:1px solid #ccc;
margin:10px;
padding:10px;
width:400px;
}
JavaScript
$(function(){
$("#melradio").click(function(){
if($('div').hasClass('divRadio')){
return;
}
//寻找radio元素包装
$("input:radio").each(function(){
var name=$(this).attr('name');
var dClass="divRadio";
var that=$(this);
if(that.attr('checked')){
dClass="divRadioCheck";
}
//隐藏原先的radio
$(this).hide();
var d=$("<div/>").addClass(dClass)
.hover(function(){
$(this).addClass('divRadioHover');
},function(){
$(this).removeClass('divRadioHover');
})
.click(function(){
//判断当前div的状态是否选中
if($(this).hasClass('divRadio')){
//radio的互斥特性
//去除所有的模拟radio的选中
$('div.divRadioCheck').removeClass('divRadioCheck').addClass('divRadio');
//去除所有与该radio同名的radio的选中属性
$('input:radio').find(':[name='+name+']').attr('checked',false);
$(this).removeClass('divRadio').addClass('divRadioCheck');
that.attr({
checked:true
});
}else{
$(this).removeClass('divRadioCheck').addClass('divRadio');
that.attr(
'checked',false);
}
})
that.parent().append(d);
})
});
$("#melcheckbox").click(function(){
if($('div').hasClass('divCheck')||$('div').hasClass('divCheckBox')){
return;
}
//寻找checkbox元素包装
$('input:checkbox').each(function(){
var cClass="divCheck";
var that=$(this);
if(that.attr('checked')){
cClass="divCheckBox";
}
//隐藏原先的checkbox
that.hide();
var e=$('<div/>').addClass(cClass)
.click(function(){
if($(this).hasClass('divCheck')){
$(this).removeClass('divCheck').addClass('divCheckBox');
that.attr('checked',true);
}else{
$(this).removeClass('divCheckBox').addClass('divCheck');
that.attr('checked',false);
}
});
that.parent().append(e);
})
})
})
相关阅读 更多 +
