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

来源：互联网 2023-03-16 23:54:27 版权归原作者所有，如有侵权，请联系我们

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

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

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

书写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>

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

书写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"; }

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

书写并添加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>

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

书写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>

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

代码整体结构。

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

查看效果。

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

注意事项

jquery.min.js是个js包，可以网上下载。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML CSS JQUERY

上一篇：jQuery+CSS3+HTML5折叠卡片式展开隐藏特效下一篇：怎么用js自己写一个提示框

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

工具/原料

方法/步骤

注意事项

热门文章

标签列表