<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); *...
我们需要覆盖这个方法，使得在弹出下拉列表时，列表中的每个项目都带有复选框，并且这些复选框的状态与模型中的状态同步。 5. **处理用户交互**： 当用户在下拉列表中点击一个复选框时，我们需要捕获这个事件，并...
在特定的开发场景中，我们可能需要增强QTableView的功能，例如为表格中的每一行添加复选框或者下拉框控件，以提供更多的交互方式。这个过程涉及到Qt的自定义 delegate（委托）机制以及信号与槽的连接。 首先，我们...
在一些复杂的用户界面设计中，我们可能需要对表头进行自定义，例如添加复选框或下拉框，以提供更丰富的交互功能。在本篇中，我们将深入探讨如何在`QTableView`或`QTableWidget`的表头中实现这些自定义功能，尤其关注...
在网页设计和开发中，"省市区联动下拉，下拉框复选框控件"是一种常见的用户界面元素，主要用于用户输入地理位置信息。这个控件通常由三个下拉菜单组成，分别代表省份、城市和区县，它们之间存在联动关系。当用户在...
对于“SelectBox下拉复选框多选插件”，这意味着它是一个独立的JavaScript或CSS库，可以轻松集成到任何项目中，为下拉框添加多选和搜索功能。 5. **搜索功能**：此插件的一个关键特性是搜索功能。在大量选项的下拉...
Axure 9 设计之Select下拉复选框效果（中继器）、教程、中继器、axure、交互设计
在网页开发中，有下拉菜单的复选框是一种常见的交互元素，它允许用户在一组选项中进行多项选择，同时这些选项又能隐藏在一个下拉菜单内以节省空间。本示例涉及的技术点主要包括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 ...
将复选框嵌套在下拉框内，既保留了下拉框的空间效率，又提供了多选的便利性，使得用户可以在不占据过多屏幕空间的情况下进行复杂的多选项选择。 实现“下拉框嵌套复选框”需要前端技术的支持，如HTML、CSS和...
这个功能增强了标准的单选下拉框，允许用户同时选择多个条目，通常通过复选框实现。在描述中提到的“全选/全不选”功能，是多选下拉框的一种高级特性，它提供了快速选择或取消所有选项的便利。 首先，我们来看看`...
在Web开发中，复选框（Checkbox）是一种常见的用户交互元素，用于让用户从多个选项中选择一个或多个。jQuery，作为一款强大的JavaScript库，提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细...
在Excel中，我们经常需要创建交互式的数据输入界面，其中下拉框（Dropdown List）和复选框（Checkbox）是常见的元素。本示例“用VBA实现Excel单元格下拉框复选demo”旨在教大家如何利用Visual Basic for ...