<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>
分享到：
相关推荐
接下来，我们转向第二种方法，即使用JQUERY实现带有复选框的下拉列表。JQUERY是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画等功能。在这种实现中，我们会先创建一个基础的HTML结构，然后使用JQUERY来...
在Web开发中，实现带复选框的下拉列表可以通过HTML、CSS和JavaScript技术。HTML可以创建基础的下拉列表结构，CSS用于美化样式，而JavaScript则用于处理交互逻辑，如动态过滤选项、记录和提交选中项。例如，使用...
下拉复选框通常由HTML的`<select>`元素与`<option>`子元素配合使用，而为了实现更丰富的交互效果，我们可能还会涉及到JavaScript（js）和CSS（css）的运用。在这个项目中，包含的`TestPublicUserManageNew.html`是主...
接下来，我们来看`ff.js`文件中的JavaScript代码，它将实现下拉列表与复选框的功能： ```javascript document.addEventListener('DOMContentLoaded', function() { var dropdown = document.getElementById('...
其次，为了实现下拉列表的展开与复选功能，我们可以利用CSS控制`<select>`元素的样式，将其转变为一个看起来像下拉列表的div，然后用JavaScript或jQuery来处理点击事件，动态显示/隐藏复选框列表。这种方法需要对...
1. **复选框下拉列表的实现原理** 复选框下拉列表通常由两个主要部分组成：一个下拉按钮和一个显示选定项的区域。当用户点击下拉按钮时，会展示一个包含复选框的列表，用户可以勾选他们感兴趣的选项，然后关闭列表...
在传统的下拉列表中，用户只能选择一个选项，但WebCombox控件允许用户在展开的列表中多选，通过复选框来实现。这种控件在数据筛选、用户权限设置等场景中非常实用。 创建一个带复选框的下拉列表，首先你需要在ASP...
标题中的“带复选框且支持搜索功能的下拉列表1(1--14)”指的是一个具有特定功能的用户界面组件。在Web开发中，这样的组件通常用于提供一个多选项选择的功能，用户可以通过复选框来选取多个选项，并通过搜索框快速...
- **JSP/Servlet**：对于动态网页，可以使用JSP（JavaServer Pages）或Servlet来生成包含复选框下拉菜单的HTML代码，并处理用户的选择。JSP可以直接嵌入Java代码，而Servlet则负责接收请求并返回响应。 - **数据库...
总结，"非常简单的下拉复选框"JavaScript插件是实现高效、美观的多选项选择的理想工具。其简洁的设计、良好的兼容性和丰富的自定义选项，使得它成为前端开发者在构建网页表单时的一个优秀选择。通过理解和掌握这款...
Bootstrap是一个流行的前端框架，它提供了Selectpicker插件，可以实现带有复选框的下拉列表。这个插件允许用户在下拉菜单中看到可选项，同时每个选项前都有一个复选框。 4. **Custom Components** 对于更复杂的UI...
总结，"selectbox Js实现的下拉复选框"是一个实用的网页交互设计技巧，它结合了JavaScript、HTML和CSS的力量，使得在有限的页面空间内，用户仍能方便地选择多项条件。通过理解上述知识点，开发者可以构建出更加高效...
在JavaScript编程中，下拉多选框和复选框是常见的用户交互元素，它们用于收集用户的多选项选择信息。在本项目中，我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框，而不是依赖于像jQuery这样的库，...
EasyUI的下拉复选框组件主要由两部分组成：一个文本输入框和一个下拉列表。用户可以点击输入框触发下拉列表显示，列表内包含一系列可供选择的复选项。这种设计使得用户可以在输入框中直接搜索选项，或者通过下拉查看...
它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和选择多个选项。以下是对这个主题的详细说明： 1. **下拉列表多选框**：传统的HTML `<select>` 元素只支持单选，但通过添加多选...