JS|下拉多选框的改进，如何加入全选按钮 JS|JAVA

在网上看到一个下拉浮层效果。具体URL如下，请尊重原来作者版权哦。
http://www.xwcms.net/webAnnexImages/fileAnnex/20131214/41231/xwcms.html
但是这个效果里面，我发现没有全选按钮，我研究了代码一个下午，经过试验成功加入了，全选按钮。具体添加部分如下：
在jquery.selectlayer.js文件中：

//清空 $(showid+" .selecteditem .empty").unbind().click(function() { $(showid+" .selecteditem").css("display","none"); $(showid+" .selecteditem").html(""); $(showid+" :checkbox[checked]").parent().css("color",""); $(showid+" :checkbox[checked]").parent().parent().prev().css("color",""); $(showid+" :checkbox[checked]").attr('checked',false); SetBoxBg(showid); //实现全选 $(showid+" .OpenFloatBox .a").attr('checked',false); });

在$(objid).click(function()实现，全选按钮事件实现如下：

//全选 $(showid+" .OpenFloatBox .a").unbind().click(function() { is_all_select=!is_all_select; if(is_all_select){ //alert("全部选中"); $(showid+" .OpenFloatBox .b").attr('checked',true); CopyItem(showid); }else{ //alert("全部没有选中"); $(showid+" .selecteditem").css("display","none"); $(showid+" .selecteditem").html(""); $(showid+" :checkbox[checked]").parent().css("color",""); $(showid+" :checkbox[checked]").parent().parent().prev().css("color",""); $(showid+" :checkbox[checked]").attr('checked',false); SetBoxBg(showid); }});

拷贝函数中补充如下：

//拷贝 function CopyItem(showid){ var htmlstr=' 已经选择分类：[清空已选] '; $(showid+" .item :checkbox[checked][class='b']").each(function(index){ htmlstr+=""+$(this).attr("title")+""; }) $(showid+" .item :checkbox[checked][class='s']").each(function(index){ if ($(this).parent().parent().prev().find(":checkbox").attr('checked')==false) { htmlstr+=""+$(this).attr("title")+""; } }) htmlstr+=""; $(showid+" .selecteditem").html(htmlstr); if ($(showid+" .item :checkbox[checked]").length>0){ $(showid+" .selecteditem").css("display","block"); }else{ $(showid+" .selecteditem").css("display","none"); } //已选项目绑定click $(showid+" .selecteditem :checkbox").unbind().click(function(){ var selval=$(this).val(); $(showid+" .item :checkbox[checked]").each(function() { if ($(this).val()==selval) { $(this).attr("checked",false); if ($(this).attr("class")=="b") { $(this).parent().next().find(":checkbox").attr("checked",false); //实现全选 if(is_all_select){ $(showid+" .OpenFloatBox .a").attr('checked',false); is_all_select=false; } } //重新克隆 CopyItem(showid); } }) });

添加全局变量如下：

var is_all_select=false;

全部JS文件代码如下：

//职位，地区选择弹出层函数 var is_all_select=false; function OpenCategoryLayer(objid,showid,input_cn,input,QSarr,strlen) { $(objid).click(function() {$(this).blur(); $(this).parent("div").before(""); $(".menu_bg_layer").height($(document).height()); $(".menu_bg_layer").css({ width: $(document).width(), position: "absolute",left:"0", top:"0","z-index":"0","background-color":"#000000"}); $(".menu_bg_layer").css("opacity",0); $(showid+" .OpenFloatBoxBg").css("opacity", 0.2); $(showid).show(); $(showid+" .OpenFloatBox").css({"left":($(document).width()-$(showid+" .OpenFloatBox").width())/2,"top":"120","z-index":"999"}); SetBoxBg(showid); $(showid+" .item").unbind().hover( function(){ $(this).find(".titem").addClass("titemhover"); var strclass=QSarr[$(this).attr("id")]; var pid=$(this).attr("id"); if (strclass) { $(this).find(".sitem").css("display","block"); if ($(this).find(".sitem").html()=="") { $(this).find(".sitem").html(MakeLi(strclass,pid)); //生成LI } } $(showid+" .OpenFloatBox label").unbind().click(function() { if ($(this).attr("title")) { if ($(this).find(":checkbox").attr('checked')) { $(this).next().find(":checkbox").attr('checked',true); } else { $(this).next().find(":checkbox").attr('checked',false); } } else { if ($(this).parent().find(":checkbox[checked]").length>0) { $(this).parent().prev().find(":checkbox").attr('checked',false); } } CopyItem(showid); }); }, function(){ $(this).find(".titem").removeClass("titemhover"); $(this).find(".sitem").css("display","none"); } ); $(showid+" .OpenFloatBox .DialogClose").unbind().hover(function(){$(this).addClass("spanhover")},function(){$(this).removeClass("spanhover")}); $(showid+" .DialogClose").click(function(){DialogClose(showid); }); //确定选择 $(showid+" .Set").unbind().click(function() { SetInput(showid,input_cn,input,strlen); }); //全选 $(showid+" .OpenFloatBox .a").unbind().click(function() { is_all_select=!is_all_select; if(is_all_select){ //alert("全部选中"); $(showid+" .OpenFloatBox .b").attr('checked',true); CopyItem(showid); }else{ //alert("全部没有选中"); $(showid+" .selecteditem").css("display","none"); $(showid+" .selecteditem").html(""); $(showid+" :checkbox[checked]").parent().css("color",""); $(showid+" :checkbox[checked]").parent().parent().prev().css("color",""); $(showid+" :checkbox[checked]").attr('checked',false); SetBoxBg(showid); }}); //关闭 function DialogClose(showid) { $(".menu_bg_layer").hide(); $(showid).hide(); } //设置表单 function SetInput(showid,input_cn,input,strlen) { var a_cn=new Array(); var a_id=new Array(); var i=0; /** if ($(showid+" .OpenFloatBox .selecteditem :checkbox[checked]").length>8) { alert("不能超过8个选项"); return false; } */ $(showid+" .OpenFloatBox .selecteditem :checkbox[checked]").each(function(index) { a_cn[index]=$(this).attr("title"); if ($(this).attr("class")=="b") { a_id[i]=$(this).val()+".0"; } else { a_id[i]=$(this).attr("id")+"."+$(this).val(); } i++; }); $(input_cn).val(limit(a_cn.join("+"),strlen)); if ($(input_cn).val()=="")$(input_cn).val("未选择"); $(input).val(a_id.join("-")); DialogClose(showid); } }); } //设置阴影 function SetBoxBg(showid) { var FloatBoxWidth=$(showid+" .OpenFloatBox").width(); var FloatBoxHeight=$(showid+" .OpenFloatBox").height(); var FloatBoxLeft=$(showid+" .OpenFloatBox").offset().left; var FloatBoxTop=$(showid+" .OpenFloatBox").offset().top; $(showid+" .OpenFloatBoxBg").css({display:"block",width:(FloatBoxWidth+12)+"px",height:(FloatBoxHeight+12)+"px"}); $(showid+" .OpenFloatBoxBg").css({left:(FloatBoxLeft-5)+"px",top:(FloatBoxTop-5)+"px"}); } //生成小类 function MakeLi(val,pid){ if (val=="")return false; arr=val.split("|"); var htmlstr=''; for (x in arr) { var v=arr[x].split(","); htmlstr+=""+v[1]+" "; } return htmlstr; } //拷贝 function CopyItem(showid){ var htmlstr=' 已经选择分类：[清空已选] '; $(showid+" .item :checkbox[checked][class='b']").each(function(index){ htmlstr+=""+$(this).attr("title")+""; }) $(showid+" .item :checkbox[checked][class='s']").each(function(index){ if ($(this).parent().parent().prev().find(":checkbox").attr('checked')==false) { htmlstr+=""+$(this).attr("title")+""; } }) htmlstr+=""; $(showid+" .selecteditem").html(htmlstr); if ($(showid+" .item :checkbox[checked]").length>0){ $(showid+" .selecteditem").css("display","block"); }else{ $(showid+" .selecteditem").css("display","none"); } //已选项目绑定click $(showid+" .selecteditem :checkbox").unbind().click(function(){ var selval=$(this).val(); $(showid+" .item :checkbox[checked]").each(function() { if ($(this).val()==selval) { $(this).attr("checked",false); if ($(this).attr("class")=="b") { $(this).parent().next().find(":checkbox").attr("checked",false); //实现全选 if(is_all_select){ $(showid+" .OpenFloatBox .a").attr('checked',false); is_all_select=false; } } //重新克隆 CopyItem(showid); } }) }); $(showid+" .OpenFloatBox .item label :checkbox").parent().css("color",""); $(showid+" .OpenFloatBox .item label :checkbox[checked]").parent().css("color","#FF6600"); $(showid+" .OpenFloatBox .sitem :checkbox[checked]").each(function(index){ $(this).parent().parent().prev().css("color","#FF6600"); }); SetBoxBg(showid); //清空 $(showid+" .selecteditem .empty").unbind().click(function() { $(showid+" .selecteditem").css("display","none"); $(showid+" .selecteditem").html(""); $(showid+" :checkbox[checked]").parent().css("color",""); $(showid+" :checkbox[checked]").parent().parent().prev().css("color",""); $(showid+" :checkbox[checked]").attr('checked',false); SetBoxBg(showid); //实现全选 $(showid+" .OpenFloatBox .a").attr('checked',false); }); } //截取字符 function limit(objString,num) { var objLength =objString.length; if(objLength > num){ return objString.substring(0,num) + "..."; } return objString; }

前端HTML页面改动如下：