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

转载 2006年06月22日 12:09:00

<!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';/" 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^webjx.com@=http://www.webjx.com^51windows.Net@=http://www.webjx.net","http://www.webjx.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>

入门HTML之复选框 单选框 下拉列表

复选框(Checkbox)  在一个表单里的所有多选框可以有一个或多个被选中。 复选框 请选择您喜欢的音乐: 摇滚 爵士 流行 单选框(RadioButton)...
  • u011333814
  • u011333814
  • 2013年12月18日 20:53
  • 3380

Jquery操作下拉列表和复选框,自定义下拉

达人科技 2017-01-08 17:07 后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,...
  • u011277123
  • u011277123
  • 2017年01月10日 09:07
  • 707

实现带复选框的下拉列表

最近在项目中有遇到需要带复选框的下拉列表,找了好久都没找到相关资料,只好自己用jQuery+css实现了一个简单的小demo,虽然有点丑,但效果基本实现了,大家将就着看吧。 注:(以下代码为本人自己...
  • guxin_duyin
  • guxin_duyin
  • 2017年04月16日 10:54
  • 1897

Ztree创建带有复选框的树

需要增加的属性check: { enable: true }封装的工具代码function createTree(url, treeId) { var zTree; //用于保存创建的...
  • zbw18297786698
  • zbw18297786698
  • 2017年05月14日 11:18
  • 1035

html之复选杜框(checkbox)、单选按钮(radio)、下拉菜单(select-option)

1、复选框(checkbox) 代码:
  • LClansefengbao
  • LClansefengbao
  • 2014年06月12日 21:52
  • 8194

对联网页特效代码

方法一:(混合动画和图片)   http://www.w3.org/1999/xhtml">
  • haibo0668
  • haibo0668
  • 2016年06月02日 12:48
  • 215

使用带复选框的CheckBoxTree树组件

在使用Java Swing开发UI程序时,很有可能会遇到使用带复选框的树的需求,但是Java Swing并没有提供这个组件,因此如果你有这个需求,你就得自己动手实现带复选框的树。 Check...
  • Joy0125
  • Joy0125
  • 2014年03月03日 20:53
  • 4484

下拉列表、单选按钮、复选框常用用法总结

下拉列表html 相等 大于 小于 获取下拉列表的值$("#demoselect").val()//value$("#demoselect")....
  • dora_310
  • dora_310
  • 2017年01月10日 22:01
  • 1016

easyui 带复选功能的下拉菜单

最近由于项目需要,前端页面需要做一个带复选功能的下拉菜单,由于在项目中,需要特定的样式等,所以,给出核心代码以供日后复习: 1.效果图        2.实现的主要功能     (1...
  • u010176097
  • u010176097
  • 2015年09月01日 18:18
  • 2723

C#列表框、复选列表框、组合框的使用

功能实现效果:                        实现代码: 1>声明相关变量存储专业、课程设置及相关信息: string gr, msg, xy; string[] ...
  • beyondqd
  • beyondqd
  • 2013年01月25日 09:05
  • 1165
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:带复选框的列表框[网页特效代码]
举报原因:
原因补充:

(最多只允许输入30个字)