先上效果图
样式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>