<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CheckBoxList的列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body,td{font-size:12px;color:#000000;}
.checkbox{width:15px;height:15px;}
.cked{
margin:1px;padding:2px;width:100%;display:block;background-color:highlight;color:highlighttext;
}
.nock{
margin:1px;padding:2px;width:100%;display:block;
}
</style>
</head>
<script LANGUAGE="JavaScript">
<!--
function checkItem (name,str) {
this.htmlcode='';
this.option=new Array();
function HtmlEncode(text){
return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
this.init=function () {
if (str=="")
return
var arr=str.split('^');
for(var i=0;i<arr.length;i++)
{
var t,v,temp='';
var thisarr=arr[i].split('@=');
if (thisarr.length==2)
{
t=HtmlEncode(thisarr[0]);
v=HtmlEncode(thisarr[1]);
}
else
{
t=v=HtmlEncode(arr[i]);
}
temp+="<label class=\"nock\" for=\"i_"+name+"_"+i+"\" id=\"l_"+name+"_"+i+"\">";
temp+="<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\" name=\""+name+"\" id=\"i_"+name+"_"+i+"\" value=\""+v+"\" \/> ";
temp+=t+"</label>";
this.option.push(temp);
}
for (i=0;i<this.option.length;i++)
if (this.option[i])
this.htmlcode+=this.option[i]
}
this.getV=function (o) {
if (!o)
return
var allvalue=new Array();
var itemList=new Array();
for(var i=0;i<o.length;i++)
{
if(o[i].checked){
allvalue.push(o[i].value);
itemList.push(o[i].id);
}
}
itemList.push(allvalue)
return itemList;//返回数组，最后一个值是要提交的数据的数组，前面的是每个值的id值
}
this.removeItem=function (o) {
if (!o)
return//值不存在就返回
//var delOption=String(o).split(",");
var tempA=new Array();
for (i=0;i<this.option.length;i++)
{
for (m=0;m<o.length;m++)
{
if (this.option[i].match(o[m]))
{
this.option[i]="";
break;
}
else if (m!=(o.length-1))
{
continue;
}
}
}
this.htmlcode="";
for (i=0;i<this.option.length;i++)
if (this.option[i])
this.htmlcode+=this.option[i]
}
this.addItem=function (addstr) {
if (!addstr)
return
for (var i=0;this.option[i];i++);//循环遍历找到option中值为空的i
if (!this.option[i])
{
var thisarr=addstr.split("@=");
if (thisarr.length)
{
var t,v,temp;
if (thisarr.length==2)
{
t=HtmlEncode(thisarr[0]);
v=HtmlEncode(thisarr[1]);
}
else
{
t=v=HtmlEncode(addstr);
}
temp ="<label class=\"nock\" for=\"i_"+name+"_"+i+"\" id=\"l_"+name+"_"+i+"\">";
temp+="<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\" name=\""+name+"\" id=\"i_"+name+"_"+i+"\" value=\""+v+"\" \/> ";
temp+=t+"</label>";
this.option[i]=temp;
this.htmlcode="";
for (i=0;i<this.option.length;i++)
if (this.option[i])
this.htmlcode+=this.option[i]
}
}
}
this.init();
}
//-->
</script>
<body>
<form method="post" name="myform" action="?">
<table border="1" width="200">
<tr>
<td><div id=checkboxitem style="width:180px;height:150px;overflow:auto;border: 2px inset #FFFFFF;">
<script LANGUAGE="JavaScript">
<!--
var aa=new checkItem("city","北京^山东^香港^澳门^台湾")
function hide () {
checkboxitem.innerHTML=''
}
function show () {
checkboxitem.innerHTML=aa.htmlcode
}
function del() {
aa.removeItem(aa.getV(document.myform.city))
checkboxitem.innerHTML=aa.htmlcode
}
function add () {
aa.addItem("aaa")
checkboxitem.innerHTML=aa.htmlcode
}
//-->
</script>
</div></td>
</tr>
<tr>
<td><button onclick="hide()">隐藏</button>
<button onclick="show()">显示</button>
<button onclick="del()">remove</button>
<button onclick="add();">addItem</button>
<button onclick="alert(aa.getV(document.myform.city).join('-'));">get值</button> </td>
</tr>
</table>
</form>
</body>
</html>
[此贴子已经被作者于2006-2-13 7:13:46编辑过]
