层模拟下拉框，弹出的层中多个复选框

最新推荐文章于 2022-10-28 19:05:54 发布

xiaoliangaccp

最新推荐文章于 2022-10-28 19:05:54 发布

阅读量1.7k

点赞数

分类专栏： JS 文章标签： input class border function xhtml float

本文链接：https://blog.csdn.net/xiaoliangaccp/article/details/5880638

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body {margin:0; padding:10px;font-family:"宋体",Arial,serif; font-size:12px}
div,form,img,ul,ol,li,dl,dt,dd,textarea {margin: 0; padding: 0; border: 0;}
ul,li{list-style-type:none}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
h1{font-size:14px; text-align:left}
table,td,tr,th{font-size:12px;}
input,select{font-size:12px; padding:0; margin:0; vertical-align:middle}
.clear{clear:both; margin:0; padding:0; font-size:1px; height:1px; visibility:hidden}
.blank{ clear:both; margin:0; padding:0; font-size:1px; height:1px;}
a{background:transparent;text-decoration: none;}
a:hover{background:transparent;text-decoration:underline; }
/*下拉框*/
.seleLine{clear:both; position:relative;border:1px solid #ccc;width:800px;height:20px}
.seleLine .ipt01{float:left;width:110px; height:14px; border:0; padding:4px 0 0 5px; cursor:default}
.seleLine a{ float:right;display:block;width:14px; height:20px;padding: 0; border: 0; font-size:1px;background:url(images/s_bt.gif) no-repeat;}
.seleLine a:hover{background:url(images/s_bt2.gif) no-repeat;text-decoration:none;}
.seleDiv{position:absolute;border:1px solid #ccc;width:130px; padding:3px; top:20px; left:-1px; background:#fff}
.seleDiv li{text-align:left;height:20px; padding:0 0 0 1px; border:1px solid #fff}
.seleDiv li.over{border:1px solid #ddd; background:#efefef}
.seleDiv li .soBox{_vertical-align:text-bottom;margin:0 0 3px;_margin:0 0 -1px; height:20px; width:20px }
</style>
<script>
function $(id) {return document.getElementById(id);}
function $F(name){return document.getElementsByTagName(name);}
function turnit(seleDiv)
{
var seleId=document.getElementById(seleDiv);
if (seleId.style.display=="none")
    {seleId.style.display="";
}
else
    {seleId.style.display="none";
   }
}
function sele()
{
/* var ipt=document.getElementById(txt);
    var box=document.getElementById(cBox);
ipt.value=box.value;
$('postString').value= box.value;*/
var checkboxs = document.getElementsByName("aa");
  var idArray = new Array();
  for(i=0;i<checkboxs.length;i++)
  {
   if(checkboxs[i].checked){
   idArray.push(checkboxs[i].value); }
   else
   checkboxs[i].checked=false;
  }
  $('txtYxbb').value = idArray.join("-");
  //alert($('txtYxbb').value);
  $('postString').value= $('txtYxbb').value;
}
function inputValues()
{
  var checkboxs = document.getElementsByName("aa");
  var idArray = new Array();
  for(i=0;i<checkboxs.length;i++)
  {
   if($('qy1').checked){
   checkboxs[i].checked=$('qy1').checked;
   idArray.push(checkboxs[i].value); }
   else
   checkboxs[i].checked=false;
  }
  $('txtYxbb').value = idArray.join("-");
  //alert($('txtYxbb').value);
  $('postString').value= $('txtYxbb').value;
}
</script>
</head>
<body>
<input type="text" id="postString" style="width:800px"><br/>
下面的框显示不全用上面这个显示,我也不想改这个css了
<div class="seleLine">
<input name="" type="text" id="txtYxbb" class="ipt01" value="选择所有" readonly οnclick="turnit('yxbb')"/>
<a href="#" οnfοcus="this.blur()" οnmοuseοver="turnit('yxbb')"> </a>
<div class="seleDiv" style="display:none" id="yxbb">
     <ul>
       <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" ><input name="a" type="checkbox" value="" id="qy1" class="soBox" οnclick="inputValues()"/><label for="qy1">所有区域</label></li>
       <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="台江区" id="qy2" class="soBox"/ ><label for="qy2">台江区</label></li>
       <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="鼓楼区" id="qy3" class="soBox"/><label for="qy3">鼓楼区</label></li>
    <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="湖北" id="qy4" class="soBox"/><label for="qy4">湖北</label></li>
    <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="kevin" id="qy5" class="soBox"/><label for="qy5">kevin</label></li>
    <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className=''" οnclick="sele()"><input name="aa" type="checkbox" value="www.bluekevin.com" id="qy6" class="soBox"/><label for="qy6">www.bluekevin.com</label></li>
     </ul>
</div>
</div>
</body>
</html>

xiaoliangaccp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层模拟下拉框，弹出的层中多个复选框

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb
复制链接

扫一扫