記錄下拉框多選，全選，反選

先上效果圖

樣式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>