带复选框的列表框[网页特效代码]

<!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, '&amp').replace(//"/g, '&quot;').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';/" οnclick=/"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 οnclick='_sl(document.myform.city,true);'>全选</button>
<button οnclick='_sl(document.myform.city,false);'>全不选</button>
<button οnclick='_setv(document.myform.city,"甘肃,广东");'>set值</button>
<button οnclick='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^webjx.com@=http://www.webjx.com^51windows.Net@=http://www.webjx.net","http://www.webjx.net")
//-->
</SCRIPT></div>
      </td>
    </tr>
    <tr>
      <td>
<button οnclick='_sl(document.myform.WebSite,true);'>全选</button>
<button οnclick='_sl(document.myform.WebSite,false);'>全不选</button>
<button οnclick='_setv(document.myform.WebSite,"http://www.google.com");'>set值</button>
<button οnclick='alert(_getv(document.myform.WebSite));'>get值</button>
      </td>
    </tr>
    <tr>
      <td align="center"><button οnclick='document.myform.reset();'>重置表单</button> </td>
    </tr>
  </table>
</form>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值