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、书写multiselect.jsjs代码。
<script>
$.fn.extend({
"multiselectInit":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、查看效果。
