jQuery表单复选框与单选框美化

1、新建html文档。

2、书写hmtl代码。<h3>多选：</h3><div id="test"></div><span>结果：</span><input type="text" id="testValue"/><h3>单选：</h3><div id="test2"></div><span>结果：</span><input type="text" id="testValue2"/><h3>已选:</h3><div id="test3"></div><span>结果：</span><input type="text" id="testValue3"/><h3>关于选择类型（checkStyle）:</h3><div style="height: 25px"><b style="margin-right: 10px;"><span>yx(圆心):</span></b><span><i class="iconfont icon-xuanzhong"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div><div style="height: 25px"><b style="margin-right: 10px;"><span>yg(圆钩):</span></b><span><i class="iconfont icon-xuanzhong1"></i></span><span><i class="iconfont icon-weixuanzhong1"></i></span></div><div style="height: 25px"><b style="margin-right: 10px;"><span>fx(方心):</span></b><span><i class="iconfont icon-CombinedShapeCopy"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div><div style="height: 25px"><b style="margin-right: 10px;"><span>fg(方钩):</span></b><span><i class="iconfont icon-xuanzhong3"></i></span><span><i class="iconfont icon-weixuanzhong"></i></span></div>

3、书写css代码。.selectShow { height: 40px; }.selectShow ul { list-style: none; margin: 0px; padding: 0px; }.selectShow ul .cleanItem { border: solid thin #AFCBCF; font-size: 14px; cursor: pointer; background-color: #AFCBCF; width: 100px; }.selectShow ul .cleanItem:hover { background-color: #AFCBBF; }.selectShow ul li { min-width: 100px; text-align: center; float: left; height: 30px; line-height: 30px; }.selectShow ul li i { font-size: 20px; padding: 0px 5px; }.selectShow ul .selectItem { border: solid thin #AFCBCF; font-size: 14px; margin-left: 10px; cursor: pointer; }.selectShow ul .selectItem:hover { border: solid thin #6699FF; }.selectShow ul .selectItem i { float: right; margin-left: 5px; }.selectList { height: 40px; }.selectList ul { list-style: none; margin: 0px; padding: 0px; }.selectList ul li { float: left; margin-left: 10px; line-height: 40px; cursor: pointer; }.selectList ul li i { margin-right: 3px; }.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.icon-shanchu:before { content: "\e61c"; }.icon-xuanzhong:before { content: "\e64a"; }.icon-CombinedShapeCopy:before { content: "\e604"; }.icon-xuanzhong3:before { content: "\e525"; }.icon-weixuanzhong:before { content: "\e626"; }.icon-xuanzhong1:before { content: "\e617"; }.icon-qingchu:before { content: "\e630"; }.icon-weixuanzhong1:before { content: "\e602"; }

4、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/multiselect.js"></script><script > $("#test").multiselectInit({ "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}], "isMulti":true,//是否多选 "inputId":"testValue",//输入框的id "checkStyle":"fg"//选择的样式 }); $("#test2").multiselectInit({ "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}], "isMulti":false,//是否多选 "inputId":"testValue2",//输入框的id "checkStyle":"yx"//选择的样式 }); $("#test3").multiselectInit({ "selectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"},{"colId":4,"colValue":"西瓜"},{"colId":5,"colValue":"甘蔗"}], "isSelectData":[{"colId":1,"colValue":"苹果"},{"colId":2,"colValue":"香蕉"},{"colId":3,"colValue":"菠萝"}], "isMulti":true,//是否多选 "inputId":"testValue3",//输入框的id "checkStyle":"fx"//选择的样式 });</script>

5、书写multi衡痕贤伎select.jsjs代码。<script>$.fn.extend({ "multiselectIn足毂忍珩it":function(opt){ if(typeof opt != "object"){ alert("参数出错！"); return; } var mid = $(this).attr("id"); if(mid==null||mid==""){ alert("要设定一个id!"); return; } if(!opt.selectData instanceof Array){ alert("selectData参数错误"); return; } $.each(multiselectTools.getInitOption(mid), function (key, value) { if (opt[key] == null) { opt[key] = value; } }); if(opt.isSelectData!=""){ if(!opt.isSelectData instanceof Array){ alert("isSelectData参数错误，数据类型应该为数组"); return; } if(opt.isSelectData.length>1&&!opt.isMulti){ alert("单选模式设置错误！"); return; } } multiselectTools.initWithUI(opt); multiselectEvent.initCleanEvent(opt); multiselectEvent.initClickEvent(opt); multiselectEvent.initDeleteEvent(opt); }});var multiselectTools={ "checkStyleArray":{ "yx":{ "check":"icon-xuanzhong", "uncheck":"icon-weixuanzhong1" }, "yg":{ "check":"icon-xuanzhong1", "uncheck":"icon-weixuanzhong1" }, "fx":{ "check":"icon-CombinedShapeCopy", "uncheck":"icon-weixuanzhong" }, "fg":{ "check":"icon-xuanzhong3", "uncheck":"icon-weixuanzhong" } }, "initWithUI":function(opt){ var appendStr =""; appendStr +="<div class='selectShow'>"; appendStr +="<ul>"; appendStr +="<li class='cleanItem'><i class='iconfont icon-qingchu'></i></li>"; appendStr +="</ul>"; appendStr +="</div>"; appendStr +="<div class='selectList'>"; appendStr +="<ul>"; appendStr +="</ul>"; appendStr +="</div>"; $("#"+opt.mid).html(appendStr); var selectData = opt.selectData; $.each(selectData,function (i,itemObj) { $("#"+opt.mid+" .selectList ul").append("<li code='"+itemObj.colId+"' showStr='"+itemObj.colValue+"'><i class='iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].uncheck+"'></i>"+itemObj.colValue+"</li>"); }); if(opt.isSelectData!=""){ $.each(opt.isSelectData,function(i,itemObj){ multiselectTools.addChecked(itemObj.colId,itemObj.colValue,opt); multiselectTools.toChecked(opt,itemObj.colId); }); multiselectTools.setValueInput(opt.mid,opt.inputId); } }, "toChecked":function(opt,value){ var selectObj = $("#"+opt.mid+" .selectList ul li[code='"+value+"']"); selectObj.attr("isCheck","true"); selectObj.find("i").attr("class","iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].check); }, "toUnChecked":function(opt,value){ var selectObj = $("#"+opt.mid+" .selectList ul li[code='"+value+"']"); selectObj.removeAttr("isCheck"); selectObj.find("i").attr("class","iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].uncheck); }, "getInitOption":function(mid){ var option = { "mid":mid, "isSelectData":"", "selectData":"", "isMulti":true, "inputId":"", "checkStyle":"fg" }; return option; }, "addChecked":function(value,showStr,opt){ $("#"+opt.mid+" .selectShow ul").append("<li class='selectItem' code='"+value+"'>"+showStr+"<i class='iconfont icon-shanchu'></i></li>"); multiselectEvent.initDeleteEvent(opt); }, "removeChecked":function(value,opt){ $("#"+opt.mid+" .selectShow ul .selectItem[code='"+value+"']").remove(); }, "getSelectValue":function(mid){ var str=""; var checkedObjs = $("#"+mid+" .selectList ul li[isCheck='true']"); $.each(checkedObjs,function (i,itemObj) { str+=$(itemObj).attr("code")+","; }); str = str.substr(0,str.length-1); return str; }, "setValueInput":function(mid,inputId){ var str = multiselectTools.getSelectValue(mid); if(inputId!=""&&multiselectTools.fondExitById(inputId)) { $("#" + inputId).val(str); } }, "cleanAll":function(opt) { $("#"+opt.mid+" .selectShow ul .selectItem").remove(); var objs = $("#" + opt.mid + " .selectList ul li"); objs.removeAttr("isCheck"); objs.find("i").attr("class","iconfont "+multiselectTools.checkStyleArray[opt.checkStyle].uncheck); if(opt.inputId!=""&&multiselectTools.fondExitById(opt.inputId)){ $("#"+opt.inputId).val(""); } }, "fondExitById":function(idStr){ return $("#"+idStr).length>0; }};var multiselectEvent ={ "initClickEvent":function(opt){ $("#"+opt.mid+" .selectList ul li").mousedown(function () { var isCheck = $(this).attr("isCheck"); var value=$(this).attr("code"); var showStr = $(this).attr("showStr"); if(isCheck){ multiselectTools.toUnChecked(opt,value); multiselectTools.removeChecked(value,opt); }else{ if(!opt.isMulti){ multiselectTools.cleanAll(opt); } multiselectTools.toChecked(opt,value); multiselectTools.addChecked(value,showStr,opt); } multiselectTools.setValueInput(opt.mid,opt.inputId); }); }, "initCleanEvent":function(opt){ $("#"+opt.mid+" .selectShow ul .cleanItem").mousedown(function(){ multiselectTools.cleanAll(opt); }); }, "initDeleteEvent":function(opt){ $("#"+opt.mid+" .selectShow ul .selectItem i").mousedown(function(){ var deleteObj = $(this).parent(); var code = deleteObj.attr("code"); deleteObj.remove(); if(code!=null){ multiselectTools.toUnChecked(opt,code); } multiselectTools.setValueInput(opt.mid,opt.inputId); }); }};</script>

6、代码整体结构。

7、查看效果。