带Checkbox的列表框

站内搜索

热门关键字：表格超链接漂浮跟随旋转闪烁日期艺术字滚动点击关联菜单弹出随机

网页特效分类

网页特效分类 >> 导航菜单

带Checkbox的列表框

[ 发布者：肥鱼 | 来源：51windows.Net | 时间：2005-11-8 | 浏览：人次 ]

<html>
<head>
<title>网页特效|JcwCn.Com/Js|---带Checkbox的列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<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>
<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="Js455.htm-.htm" tppabs="http://sc.jcwcn.com/tx/JsHtml/Js455.htm?">
  <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^Blueidea.com@=http://www.blueidea.com^JcwCn.Com@=http://www.linkweb.cn/js","http://www.linkweb.cn/js")
//-->
</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>

本类相关特效