js+css实现带复选框的下拉列表 - - ITeye博客

`

huhengbin

浏览: 8050 次
性别:
来自: 杭州

最近访客更多访客>>

浮生一如梦

niepei236721

shenchengwoshi

parrot5920

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

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 onclick="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 onclick="javascript:toExit('show','boysoft')">
</td>
<td>
<div id="csb" style="display:inline">
<font color="red">
<a style="cursor:pointer" onclick="javascript:toExit('show','boysoft')">【选择商场】</a>
<a style="cursor:pointer" onclick="qk()">【清空】</a>
</font>
</div>
<div id="csb1" style="display:none">
<font color="red">
<a style="cursor:pointer" onclick="javascript:toExit('hide','boysoft')">【选定】</a>
<a style="cursor:pointer" onclick="checkAll()">【全选/反选】</a></font>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

分享到：

收藏Javascript中常用的55个经典技巧 | JSP页面静态化总结之一使用URLRewrite实现 ...

2011-09-21 10:41
浏览 3091
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

带复选框的下拉列表代码: Javascript语言开发带复选框的下拉列表代码……

jsp/html 实现下拉复选框: 包括相应的js，css文件，这些都是经过测试的。是没有问题的

JQuery&CSS;&CSS;+DIV实例大全.rar: 一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3....

dropdown-checkbox:基于JQuery的下拉复选框列表: 下拉复选框基于JQuery的下拉复选框列表（JQuery 1.7.2+） dropdown-checkbox是基于JQuery的下拉复选框列表，用于轻松地将HTML select标签替换为添加的“ multiple”属性，并使用复选框将其转换为下拉列表。复选框...

下拉复选框,提供方便的操作: <style type="text/css"> div{ padding:0px; font-size:12px; } #mainbox{ width:234px; } #box0{ width:200px; height:20px; border:1px solid green; float:left; padding-top:2px; padding-left:2...

零基础学HTML CSS源代码: 复选框.htm 表单复选框的用法。密码框.htm 表单密码框的用法。文本框.htm 表单文本框的用法。文本域.htm 表单文本域用法。下拉表.htm 表单下拉表的用法。表单实例手把手....

Js+CSS美化的超级漂亮的表单效果: 内容索引:脚本资源,Ajax/JavaScript,表单美化　用Js和CSS共同美化的漂亮表单效果，这里是用图片代替了表单中的复选框、单选框、文本框、文本域以及下拉列表和按钮等元素，更换图片你就可以更换成你喜欢的风格，当然...

程序天下:JavaScript实例自学手册: 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...

《程序天下：JavaScript实例自学手册》光盘源码: 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...

JavaScript完全自学宝典源代码: 6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...

原生JS无限级树形菜单（兼容各浏览器）: 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） ...

原生JS树菜菜单(无限级、兼容各浏览器): 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） ...

精通JS脚本之ExtJS框架.part2.rar: 8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框第9章表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...

JavaScript网页特效范例宝典源码: 实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...

精通JS脚本之ExtJS框架.part1.rar: 8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框第9章表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...

multiselect-react-dropdown:使用搜索和各种选项React多选下拉列表: :collision: :collision: :collision:描述一个React组件，提供具有多种功能的多选功能，例如选择限制，CSS自定义，复选框，搜索选项，禁用预选值，平面数组，用于辅助功能和分组功能的键盘导航。它还具有像普通...

Fit.UI:Fit.UI是基于JavaScript的UI框架，基于面向对象的原理构建: 按钮复选框上下文菜单对话带有日历小部件的日期和时间选择器下拉列表（使用ListView或TreeView）文件选择器（与图片预览异步上传）输入（使用CKEditor进行HTML编辑）进度条树视图还有更多Fit.UI支持所有主要...

scratchOpz：每日随机脚本，摘要，代码等: 禁用按钮复选框 IG在任何网站上用按钮隐藏滚动到顶部 socialProof小部件-代码和示例 4. geoStates country.json 英国，GB，IE html下拉列表选择代码 5. handleBar_js 片刻 6. javaScript-jQuery billShipSame....

SpotLotter:使用Spotify API导入在Sinatra中内置的播放列表: 下拉修复为流星修复的实现功能v0.96.0（2015年4月1日）在Materialize命名空间下添加了敬酒，过渡，scrollfire 现在创建下拉列表作为其父级的子级可折叠支持嵌套模态底页已添加添加了不确定的复选框添加了新的复选框...

Global site tag (gtag.js) - Google Analytics