模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
表單按鈕特效代碼
>
收藏
分享
查看評論
表單按鈕
演示
帶Checkbox的列表框_表單按鈕特效
查看演示效果
特效Tag：
列表
添加
帶Checkbox的列表框,您可以先修改部分代碼再運行.
<html> <head> <title>帶Checkbox的列表框</title> <meta http-equiv="Content-Type" mrc="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^Linkweb.cn@=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>
所屬頻道：
表單按鈕特效
/
更新時間：2012-05-08
[收藏]
[報錯]
[返回列表]
相關
表單按鈕特效
：
又一個帶描述的表單
可自由移動位置的導航條
頁面轉跳。跟本站的教學文章中的那些轉到第幾頁一樣的
提供四種打開新窗的形式
自動復制代碼
方便登錄各種管理頁面以及任何EMAIL量身定做！
QQ分類搜索代碼
查找表格的內容
一個帶描述的表單
常用email檢驗函數
file框模擬新解
檢測復選框
表單按鈕特效Rss訂閱
特效代碼搜索
表單按鈕特效推薦
JavaScript動態操作表格，添加，刪除行、列及單元格
仿XP界面的CSS按鈕特效代碼
支持分類的Select下拉框(Optgroup標簽示例)
連接說明浮動條腳本
一個清新的CSS表單布局
按鈕控制窗口移動
用JavaScript判斷文本框輸入的是否是英文或數字
按鈕跳轉到指定的URL代碼
純CSS實現漂亮的分頁按鈕風格
讓Select列表各項上移和下移的Js代碼
猜你也喜歡看這些
標題日期
星期查詢！可設置任意、年、月、日 ！！
WINDOWS式樣的計算器
科學計算器
世紀倒計時1
坐標圖
JavaScript自動將選擇的時間填入文本框
JS計時器(非倒計時)
根據日期來顯示當日的信息
顯示星期中包含的日期數
相關鏈接：
復制本頁鏈接
|
搜索帶Checkbox的列表框
特效說明：
表單按鈕模板
-
帶Checkbox的列表框
。
。。