<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 下拉框与复选框组合使用
首先声明：代码是我下载的，但是里边有我的劳动成功，原先的版本适用于ext3.2在3.3及以上版本中有BUG，现在这个版本在3.2,3.3,3.4中没有问题，可以正常使用
一个js的方法，调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法： * (1)调用js函数：setSelectBox(textItem, myArray); *...
包括相应的js，css文件，这些都是经过测试的。是没有问题的
QTableView添加复选框，下拉框控件
引用DLL就可以应用带复选框的下拉表 里面包含源码
省市区联动下拉，下拉框复选框控件，需要用得话按照自己的需求去修改js
QT控件QComboBox定制下拉列表为复选框的一个简单示例，在QT5.9环境下编译调试通过，可以参考此例子中的方法，进行定制修改。
自定义表头，添加复选框和下拉选项框
有下拉菜单的复选框的js代码,测试通过，绝对可用。
这个里面有安卓的单选框，复选框，以及下拉框的使用，以及点击按钮会显示你输入的信息，适合新手的借鉴与使用。
web前端插件+下拉多选复选框，可用于后台多选数据，前端也可以使用，插件可以二开也可以
经典的CXListCtrl控件，修改了其中的bug，支持VS2017 64bit的编译。
可以实现下拉框的搜索和多选功能
在表格tableview中实现复选框，下拉框，最简单快速方案，中文读取乱码问题的解决方案。 本实例在QT5.12上运行通过，用最简单的方法在tableview中实现了复选框和下拉框，同时还提供了读取文本数据的方法以及在读取中...
Access数据库多选复选框例子.zip
Delphi为树控菜单TreeView增加复选框功能，在点击展开的树形菜单节点项前面显示一个复选框，允许用户选择该复选框的内容，可用于设计编写权限设置，注意里面的注释很有价值，对学习Delphi是相当有用的。
实现在下拉框嵌套多选 下拉框中嵌套复选框，可以实现下拉多选
jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件jquery 复选框组件
本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下