单选框、多选框样式美化

来源：互联网发布：java面向对象基础编辑：程序博客网时间：2024/06/04 21:09
<!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
0 0