<html>
<head>
<title>中国站长天空-网页特效-表单特效-下拉框中的复选框</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body,td{font-size:12px;color:#000000;}
.checkbox{width:15px;height:15px;}
.cked{margin:1px;padding:2px;width:98%;display:block;background-color:highlight;color:highlighttext;}
.nock{margin:1px;padding:2px;width:98%;display:block;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script language="javascript">
<!--
function HtmlEncode(text){
return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
function _checkbox(name,str,defv){
//haiwa@2005-8-17
//http://www.51windows.net
var arr=str.split("^");
var ck="",bc="";
for(var i=0;i<arr.length;i++){
var thisarr=arr[i].split("@=");
if (thisarr[0].length>0){
var t=(thisarr.length==2)?thisarr[0]:arr[i];
var v=(thisarr.length==2)?thisarr[1]:arr[i];
if((","+HtmlEncode(defv).toLowerCase()+",").replace(/ ,/g, ',').indexOf(","+v+",")!=-1){ck=" checked";cls="cked";}
else{ck="";cls="nock";}
var thisstr="<label class=\""+cls+"\" for=\"i_"+name+"_"+i+"\" id=\"l_"+name+"_"+i+"\">";
thisstr+="<input class=\"checkbox\" onpropertychange=\"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';\" onclick=\"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';\" type=\"checkbox\""+ck+" name=\""+name+"\" id=\"i_"+name+"_"+i+"\" value=\""+HtmlEncode(v)+"\" \/> ";
thisstr+=HtmlEncode(t)+"</label>";
document.write(thisstr);
}
}
}
function _getv(o){
var allvalue="";
if(typeof(o)=="undefined"){return "";}
if (typeof(o.length)=="undefined"){
if(o.checked){return o.value+ ",";}else{return "";}
}
for(var i=0;i<o.length;i++){
if(o[i].checked){
allvalue +=o[i].value+",";
}
}
return allvalue;
}
function _setv(o,defv){
var allvalue=(","+HtmlEncode(defv).toLowerCase()+",").replace(/ ,/g, ',');
for(var i=0;i<o.length;i++){
var v = o[i].value;
o[i].checked=(allvalue.indexOf(","+v+",")!=-1)
}
return allvalue;
}
function _sl(o,b){
for(var i=0;i<o.length;i++){
o[i].checked = b
//if(o[i].checked!=b){o[i].click();}
}
}
//-->
</script>
<form method="post" name="myform" action="?">
<table border="0" width="200">
<tr>
<td><div style="width:180px;height:150px;overflow:auto;border: 2px inset #FFFFFF;">
<script language="javascript">
<!--
_checkbox("city","北京^河北^黑龙江^河南^江西^辽宁^宁夏^四川^天津^浙江^香港","北京,山东")
//-->
</script>
</div></td>
</tr>
<tr>
<td><button onclick='_sl(document.myform.city,true);'>全选</button>
<button onclick='_sl(document.myform.city,false);'>全不选</button>
<button onclick='_setv(document.myform.city,"甘肃,广东");'>set值</button>
<button onclick='alert(_getv(document.myform.city));'>get值</button></td>
</tr>
<tr>
<td><div style="width:180px;height:120px;overflow:auto;border: 2px inset #FFFFFF;">
<script language="javascript">
<!--
_checkbox("WebSite","Google.com@=http://www.google.com^Baidu.com@=http://www.baidu.com^Zzsky.cn@=http://www.zzsky.cn","http://www.zzsky.cn")
//-->
</script>
</div></td>
</tr>
<tr>
<td><button onclick='_sl(document.myform.WebSite,true);'>全选</button>
<button onclick='_sl(document.myform.WebSite,false);'>全不选</button>
<button onclick='_setv(document.myform.WebSite,"http://www.google.com");'>set值</button>
<button onclick='alert(_getv(document.myform.WebSite));'>get值</button></td>
</tr>
<tr>
<td align="center"><button onclick='document.myform.reset();'>重置</button> </td>
</tr>
</table>
</form>
</body>
</html>
来自：http://www.zzsky.cn/effect/content/1492.htm
分享到：
相关推荐
在QT编程中，下拉框（QComboBox）和复选框（QCheckBox）是两种常见的用户界面元素。它们各自有着不同的功能，但在某些场景下，将两者结合使用可以提供更丰富的用户交互体验。本篇文章将深入探讨如何在QT中实现下拉框...
"带复选框的下拉框"是一种常见的控件，它结合了下拉列表和复选框的功能，允许用户在多个选项中进行多选操作。在本案例中，我们讨论的是一个适用于Ext JS框架的特定实现，它已经针对不同版本进行了优化，解决了从3.2...
在网页开发中，"jsp/html 实现下拉复选框" 是一个常见的需求，它能够为用户提供更加便捷的多选项选择方式。下拉复选框通常由HTML的`<select>`元素与`<option>`子元素配合使用，而为了实现更丰富的交互效果，我们可能...
在Windows Forms（WinForm）开发中，我们经常需要在用户界面中实现更加复杂的功能，比如一个下拉列表，其中每个选项都有对应的复选框。这样的控件可以为用户提供更多的选择和交互方式，使得应用程序更加直观易用。...
在这个“CXListCtrl-x64_编辑框_列表控件_下拉框_复选框_”项目中，开发者已经针对64位的Visual Studio 2017进行了优化，修复了一些已知的bug，使得控件在64位环境下也能稳定运行。 1. **编辑框（Edit Box）**： ...
一个js的方法，调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法： * (1)调用js函数：setSelectBox(textItem, myArray); *...
在特定的开发场景中，我们可能需要增强QTableView的功能，例如为表格中的每一行添加复选框或者下拉框控件，以提供更多的交互方式。这个过程涉及到Qt的自定义 delegate（委托）机制以及信号与槽的连接。 首先，我们...
我们需要覆盖这个方法，使得在弹出下拉列表时，列表中的每个项目都带有复选框，并且这些复选框的状态与模型中的状态同步。 5. **处理用户交互**： 当用户在下拉列表中点击一个复选框时，我们需要捕获这个事件，并...
在网页设计和开发中，"省市区联动下拉，下拉框复选框控件"是一种常见的用户界面元素，主要用于用户输入地理位置信息。这个控件通常由三个下拉菜单组成，分别代表省份、城市和区县，它们之间存在联动关系。当用户在...
在一些复杂的用户界面设计中，我们可能需要对表头进行自定义，例如添加复选框或下拉框，以提供更丰富的交互功能。在本篇中，我们将深入探讨如何在`QTableView`或`QTableWidget`的表头中实现这些自定义功能，尤其关注...
1. 可设置多种委托类型，例如复选框 文本框 下拉框 日期框 微调框 进度条等。 2. 可设置是否密文显示，一般用于文本框。 3. 可设置是否允许编辑，一般用于下拉框。 4. 可设置是否禁用，一般用来禁用某列。 5. 可设置...
在Web开发中，复选框（Checkbox）是一种常见的用户交互元素，用于让用户从多个选项中选择一个或多个。jQuery，作为一款强大的JavaScript库，提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细...
Axure 9 设计之Select下拉复选框效果（中继器）、教程、中继器、axure、交互设计
在这个场景中，我们讨论的是在TreeView中集成复选框功能，允许用户通过勾选这些复选框来选择或操作数据项。在QT中，实现这个功能通常涉及到自定义ItemDelegate以及对信号和槽的巧妙使用。 首先，我们要理解...
对于“SelectBox下拉复选框多选插件”，这意味着它是一个独立的JavaScript或CSS库，可以轻松集成到任何项目中，为下拉框添加多选和搜索功能。 5. **搜索功能**：此插件的一个关键特性是搜索功能。在大量选项的下拉...
在Excel中，我们经常需要创建交互式的数据输入界面，其中下拉框（Dropdown List）和复选框（Checkbox）是常见的元素。本示例“用VBA实现Excel单元格下拉框复选demo”旨在教大家如何利用Visual Basic for ...
在网页开发中，有下拉菜单的复选框是一种常见的交互元素，它允许用户在一组选项中进行多项选择，同时这些选项又能隐藏在一个下拉菜单内以节省空间。本示例涉及的技术点主要包括HTML基础、CSS样式以及JavaScript编程...
首先： 引入需要的css和js <link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> [removed][removed] layui.use('form',function){ ...
在Android应用开发中，用户界面的设计至关重要，其中单选框（RadioButtons）、复选框（CheckBoxes）和下拉框（Spinner）是常见的交互元素，它们用于收集用户的选择信息或控制用户界面的状态。本教程将深入讲解这三种...
- 用户在多选复选框中做出选择后，这些选择会存储为一个字符串，用分隔符（通常是逗号）分隔各个选项。你可以通过VBA代码来解析这个字符串，以便进一步处理用户的选择。 4. **VBA代码示例：** ```vba Private ...