jQuery.HCheckbox 单选框、复选框表单美化
2014-07-24 09:47
585 查看
jQuery.HCheckbox 基于jQuery的单选框、多选框表单美化的代码例子,将复选框变化成自己喜欢的风格,不再单调和呆板,示例并演示了如何取出表单的值,对WEB前端设计相当有帮助的一个例子。
<!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>
相关文章推荐
- 推荐11款jQuery开发的复选框和单选框美化插件
- 推荐11款jQuery开发的复选框和单选框美化插件
- Jquery学习笔记:操作form表单元素之二(复选框和单选框)
- jquery对radio单选框和CheckBox复选框的操作
- 推荐11款jQuery开发的复选框和单选框美化插件
- 使用css美化单选框(radio)和复选框(checkbox)的样式
- 推荐11款jQuery开发的复选框和单选框美化插件
- 用jQuery得到form表单里面文本框、密码框、单选框、下拉框、复选框的值
- jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
- 【JavaScript&jQuery】单选框radio,复选框checkbox,下拉选择框select
- 推荐11款jQuery开发的复选框和单选框美化插件
- jquery对表单checkbox复选框的操作例子(全选,反选,获取选取值)
- jQuery 下拉列表操作 select 复选框 checkbox 单选框 radio
- jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
- 推荐11款jQuery开发的复选框和单选框美化插件
- jQuery 下拉列表操作 select 复选框 checkbox 单选框 radio
- jquery获取复选框checkbox的值
- JavaScript/jQuery 表单美化插件小结
- jquery实现复选框checkbox全选(完善)