js+css实现带复选框的下拉列表

<html>
<body>

<script language=javascript>
ie4=(document.all)?true:false;
ns4=(document.layers)?true:false;
function toExit(){
var args=toExit.arguments;
var visible=args[0];
if(ns4){
theObj=eval("document.layers[\'"+args[1]+"\']");
if(theObj)theObj.visibility=visible;
}
else if(ie4){
if(visible=='show')visible='visible';
if(visible=='hide')visible='hidden';
theObj=eval("document.all[\'"+args[1]+"\']");
if(theObj)theObj.style.visibility=visible;
}

var adiv=document.getElementById("boysoft");
var bdiv=document.getElementById("csb");
var cdiv=document.getElementById("csb1");

if(adiv.style.visibility=="visible"){
   bdiv.style.display="none";
   cdiv.style.display="inline";
}else{
   bdiv.style.display="inline";
   cdiv.style.display="none";
}
var chk=myForm.c;
var p="";
for(var j=0;j<chk.length;j++){
   if(chk[j].checked){
    p+=chk[j].value+",";
   }
}
myForm.t1.value=p;
}
function qk(){
myForm.t1.value="";
}

function checkAll()
{
if(myForm.c != undefined)
   {
    if(myForm.c.length == undefined)
    {
     if(myForm.c.checked == true)
      myForm.c.checked = false;
     else
      myForm.c.checked = true;
    }
    else
         {
         for(var i=0;i<myForm.c.length;i++)
          {
              if(myForm.c[i].checked == true)
              myForm.c[i].checked = false;
              else
              myForm.c[i].checked = true;
          }
         
      }
   }   
}
</script>
<form name="myForm">
<div id=boysoft οnclick="javascript:toExit('show','boysoft')"
style="HEIGHT: 128px; LEFT: 9px; POSITION: absolute; TOP: 36px; VISIBILITY: hidden; WIDTH: 83px; Z-INDEX: 1; background-color: #ffffff; layer-background-color: #ffffff; border: 1px none #000000">
<DIV style="OVERFLOW: auto; SCROLLBAR-BASE-COLOR: #cccccc; HEIGHT: 80px;SCROLLBAR-FACE-COLOR: #ffffff;SCROLLBAR-SHADOW-COLOR:#cccccc;SCROLLBAR-ARROW-COLOR: #cccccc;SCROLLBAR-3DLIGHT-COLOR: #cccccc">
<table border="0" width="100%">
<tr>
<td nowrap height="32"><input type="checkbox" name="c" value="1">商场01</td>
</tr>
<tr>
<td nowrap height="22"><input type="checkbox" name="c" value="2">商场02</td>
</tr>
<tr>
<td nowrap height="28"><input type="checkbox" name="c" value="3">商场03</td>
</tr>
<tr>
<td nowrap height="28"><input type="checkbox" name="c" value="4">商场04</td>
</tr>
<tr>
<td nowrap height="28"><input type="checkbox" name="c" value="5">商场05</td>
</tr>
<tr>
<td nowrap height="28"><input type="checkbox" name="c" value="6">商场06</td>
</tr>
<tr>
<td nowrap height="28"><input type="checkbox" name="c" value="7">商场07</td>
</tr>
</table>
</DIV>
</div>
<table>
<tr>
<td>
<input type="text" name="t1" value="" size="10" readonly οnclick="javascript:toExit('show','boysoft')">
</td>
<td>
<div id="csb" style="display:inline">
<font color="red">
<a style="cursor:pointer" οnclick="javascript:toExit('show','boysoft')">【选择商场】</a>
<a style="cursor:pointer" οnclick="qk()">【清空】</a>
</font>
</div>
<div id="csb1" style="display:none">
<font color="red">
<a style="cursor:pointer" οnclick="javascript:toExit('hide','boysoft')">【选定】</a>
<a style="cursor:pointer" οnclick="checkAll()">【全选/反选】</a></font>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值