<!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="width: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>
