<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉框中的复选框</title> <style type="text/css"> .c1{ background-Color:#dddddd; } .c0{ background-Color:#ffffff; } body{ margin:0px; scrollbar-face-color:#e0edfd; scrollbar-highlight-color: #dfe8f4; scrollbar-shadow-color: #2c7cda; scrollbar-3dlight-color: #2c7cda; scrollbar-arrow-color: #14549f; scrollbar-track-color: #eaf5fd; scrollbar-darkshadow-color: #ffffff; scrollbar-base-color: #e0edfd; } .menu{ display:none; } input.blur{ border:1px solid #99BBE8; background:#FFFFFF; height:18px; } .tableborder{ border:solid 1px #CCCCCC; border-collapse:collapse; font-size:12px; } </style> </head> <body onclick="closeDaohang(event.srcElement||event.target,'ds','xx')"> <form> <div id="xx"> <table> <tr> <td> <input type="text" id="where" name="where" style="100px" onclick="bb()" onblur="this.className='blur'" onfocus="this.className='focus'" class="blur" readonly> </td> </table> </div> <div id="ds" style="display:none;padding:0px 0px 0px 0px; margin:0;"> <table border="0" cellpadding="0" cellspacing="0" class="tableborder"> <tr><td id="td1"><input type="Checkbox" id="check1" name="idol02" value="1" onclick="aa(this,'td1')">你是1</td><td id="td4"><input type="Checkbox" id="check4" name="idol02" value="4" onclick="aa(this,'td4')">你是4</td></tr> <tr><td id="td2"><input type="Checkbox" id="check2" name="idol02" value="2" onclick="aa(this,'td2')">你是2</td><td id="td5"><input type="Checkbox" id="check5" name="idol02" value="5" onclick="aa(this,'td5')">你是5</td></tr> <tr><td id="td3"><input type="Checkbox" id="check3" name="idol02" value="3" onclick="aa(this,'td3')">你是3</td><td id="td6"><input type="Checkbox" id="check6" name="idol02" value="6" onclick="aa(this,'td6')">你是6</td></tr> </table> </div> </form> </body> </html> <script> function aa(obj,td_name) { var select_value=document.getElementById("where"); var td_value = document.getElementById(td_name); if(obj.checked == true){ td_value.className='c1'; //选中时颜色 if(select_value.value.length>0){ select_value.value+="," + td_value.innerText; }else{ select_value.value+=td_value.innerText; } }else{ td_value.className='c0'; //取消时颜色 if(select_value.value.indexOf("," + td_value.innerText + ",") != -1){ select_value.value = select_value.value.replace("," + td_value.innerText,''); }else if(select_value.value.indexOf("," + td_value.innerText) != -1){ select_value.value = select_value.value.replace("," + td_value.innerText,''); }else if(select_value.value.indexOf(td_value.innerText + ",") != -1){ select_value.value = select_value.value.replace(td_value.innerText + ",",''); }else if(select_value.value.indexOf(td_value.innerText) != -1){ select_value.value = select_value.value.replace(td_value.innerText,''); } } } function bb(){ var obj = document.getElementById("ds"); if(obj.style.display==""){ obj.style.display="block"; }else if(obj.style.display=="none"){ obj.style.display="block"; }else if(obj.style.display=="block"){ obj.style.display="none"; } } function inDaohang(divname,obj){ var f = false; while(obj.parentNode){ if(obj.name==divname){ return true; } obj = obj.parentNode; } return false; } function closeDaohang(e,divname,aname){ if(e.id!=aname && e.id!='where' && e.id.indexOf("td") ==-1&& e.id.indexOf("check") ==-1) if(!inDaohang(divname,e)){ var a = document.getElementsByName(divname); for(var i=0;i<a.length;i++){ a[i].style.display='none'; } } } </script>