记录下拉框多选,全选,反选
先上效果图
样式css:
#ceshi {margin:0 auto;} ul{padding: 0;margin: 0;border: 1px solid grey;} li{list-style: none;} .hide{display: none;} #fuhao{position: absolute;top: 9px;left: 244px;} #updown_show{width: 200px;position: relative;left: 85px;}
HTML:
<div id="ceshi"> <label>姓名查询:</label> <input id="username" type="text" placeholder="请选择姓名" readonly style="cursor: pointer;"/> <div id="fuhao"> <i class="iconfont icon-jiantoushang"></i> </div> <div id="updown_show" class="hide"> <ul> <li> <input type="button" value="全选" id="quanxuan"/> <input type="button" value="全不选" id="buxuan"/> <input type="button" value="反选" id="fanxuan"/> </li> <li> <input type="checkbox" value="1" class="qx"/> <label>钱德勒</label> </li> <li> <input type="checkbox" value="2" class="qx"/> <label>瑞秋</label> </li> <li> <input type="checkbox" value="3" class="qx"/> <label>莫妮卡</label> </li> <li> <input type="checkbox" value="4" class="qx"/> <label>菲比</label> </li> </ul> </div> </div>
JS:
<script type="text/javascript"> $(document).ready(function(){ //点击input查询出现下拉框 $("#username").bind("click",function(e){ if($("#updown_show").hasClass("hide")){ $("#updown_show").removeClass("hide"); $("#fuhao i").removeClass("icon-jiantoushang").addClass("icon-jiantouxia"); e.stopPropagation(); } }) //阻止点击时弹出框隐藏 $("#updown_show").click(function(e){ e.stopPropagation(); }) //点击其他地方下拉框隐藏 $(document).click(function(){ if($("#updown_show").hasClass("hide")==false){ $("#updown_show").addClass("hide") $("#fuhao i").removeClass("icon-jiantouxia").addClass("icon-jiantoushang"); $("#username").attr("value",getUserName()); } }) //全选按钮 $("#quanxuan").click(function(){ $("#updown_show input[type=checkbox]").prop("checked",true); }) //全不选 $("#buxuan").click(function(){ $("#updown_show input[type=checkbox]").prop("checked",false); }) //反选 $("#fanxuan").bind("click",function(){ var a = $("#updown_show input[type=checkbox]"); for(var i=0;i<a.length;i++){ if(a[i].checked == true){ a[i].checked = false; }else{ a[i].checked = true; } } }) //question one↑:为什么反选中a[i].prop("checked",true);是错的 //判断下拉框中的input是否被选中 function getUserName(){ var list = $("#updown_show input[type=checkbox]"),list1 = $("#updown_show label"); var arr=[],arr1=[]; for(var i=0;i<list.length;i++){ if(list[i].checked){ arr.push(list[i].value); arr1.push(list1[i].innerHTML); } } return arr1; } }) </script>