带Checkbox的列表框
带Checkbox的列表框 代码如下:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html><head><title>带Checkbox的列表框 - 51windows.Net </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 for=\'i_'+name+'_'+i+'\' id=\'l_'+name+'_'+i+'\'>'; thisstr+='<input 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^Blueidea.com@=http://www.blueidea.com^51windows.Net@=http://www.51windows.net','http://www.51windows.net')//--></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>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
