繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
表单特效
→ 正文内容
带Checkbox的列表框
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!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 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^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 全选 提示:你可先修改部分代码,再按运行]
Tags：
带Checkbox的列表框
百度中搜索更多的关于
带Checkbox的列表框
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
判断Checkbox和Radio的一种方法
下一篇文章：
js下拉框里超过变成省略号
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
javascript实现上传图片前的预览（TX的面
手机号码本地检测
checkbox实现全选的多种方法 不断更新
微调数字
打造个性化的Select(可编辑)
select发展史 超强
取得input元素中部分选中(selected)的值
解放web程序员的输入验证
javascript之dhDataGrid Ver2.0.0代码
对textarea框的代码调试，而且功能上使用
最 近 更 新
如何限制在一个表格里面禁止使用右键
收藏的js表单验证控制代码大全
js下获得单选框的值的代码
一组单选按钮radio如何进行控制
form中限制文本字节数js代码
checkbox实现全选的多种方法 不断更新
下拉菜单
基于prototype的validation.js发布2.3.4新
项目添加
将多选框选中时打勾的颜色
热 点 排 行
checkbox实现全选的多种方法 不断
收藏的js表单验证控制代码大全
HTML里select的CSS样式的改变
改进版：在select中添加、修改、
二级连动菜单
Select的OnChange()事件
javascript判断单选框或复选框是
JS多级连动菜单
多个iframe自动调整大小的问题
把textarea中字符串里含有的回车
文章评论
共有 位脚本之家网友发表了评论我来说两句