吾爱开源»首页 › 分类大区 › 文章文档 › DHTML4(SELECT与CHECKBOX使用)
返回列表 发布新资料或源码

[软件设计/软件工程] DHTML4(SELECT与CHECKBOX使用)

[复制链接]
发表于 2022-5-2 10:55:29
1.checkbox例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
<TITLE>获取CHECKBOX选中内容</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
  FUNCTION SUM(){
    VAR INPUTNODES=DOCUMENT.GETELEMENTSBYNAME("NOTEBOOK");
    VAR SUM=0;
    FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
      IF(INPUTNODES[I].CHECKED)   
        SUM+=PARSEINT(INPUTNODES[I].VALUE);
    VAR SPANNODE=DOCUMENT.GETELEMENTBYID("SUMMONEY");
    SPANNODE.INNERHTML="<FONT SIZE='7' COLOR='RED'>"+SUM+"</FONT>";

  }
  FUNCTION CHECKALL(INDEX){
    //VAR CHECKALLNODE=DOCUMENT.GETELEMENTSBYNAME("CHECKALL")[INDEX];//不传入INDEX,也可以直接使用
                                                                  //EVENT.SRCELEMENT来完成
    VAR INPUTNODES=DOCUMENT.GETELEMENTSBYNAME("NOTEBOOK");
    FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
         // INPUTNODES[I].CHECKED=CHECKALLNODE.CHECKED;//直接赋值为"全选"复选框的状态
         INPUTNODES[I].CHECKED=EVENT.SRCELEMENT.CHECKED;
  }
</SCRIPT>
</HEAD>

<BODY>
  <INPUT TYPE="CHECKBOX" NAME="CHECKALL" ONCLICK="CHECKALL(0)"/>全选<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="4000" />LENOVO笔记本:4000元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="3000"  />DELL笔记本:3000元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="5000" />ASUS笔记本:5000元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="3500" />ACER笔记本:3500元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="3500" />ACER笔记本:3500元<BR/>
<INPUT TYPE="CHECKBOX" NAME="NOTEBOOK" VALUE="13500" />ALIENWARE笔记本:13500元<BR/>
  <INPUT TYPE="CHECKBOX" NAME="CHECKALL" ONCLICK="CHECKALL(1)"/>全选<BR/>
<INPUT TYPE="BUTTON" ONCLICK="SUM()" VALUE="计算总金额"/><SPAN ID="SUMMONEY"></SPAN>
</BODY>
</HTML>
checkbox购物车

2.select应用一:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
<TITLE>SELECT动态效果</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<STYLE TYPE="TEXT/CSS">
#TEXTCLASS{
     BACKGROUND-COLOR:#FC6;
     WIDTH:400PX;
     HEIGHT:100PX;
}
#SELTEXT{
     BACKGROUND-COLOR:#CCC;
     WIDTH:200PX;
}
</STYLE>

</HEAD>

<BODY>
<DIV ID="TEXTCLASS">
EACH PRICK SILK HAS A GODDESS IN MY HEART.<BR/>
每一个屌丝心中都有一个女神
</DIV>
<BR/>
<BR/>
<SELECT ID="SELID" ONCHANGE="CHANGE()">
  <OPTION VALUE="NONE">--请选择--</OPTION>
  <OPTION VALUE="CAPITALIZE">首字母大写</OPTION>
  <OPTION VALUE="UPPERCASE">所有字母大写</OPTION>
  <OPTION VALUE="LOWERCASE">所有字母小写</OPTION>
</SELECT>
<BR/>
<BR/>
<DIV ID="SELTEXT">
选中的内容:--请选择--
</DIV>
</BODY>
</HTML>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION CHANGE(){
  WITH(DOCUMENT){
   VAR SELECTNODE=GETELEMENTBYID("SELID");
   VAR OPTIONNODES=SELECTNODE.OPTIONS;
   VAR SELECTVALUE=OPTIONNODES[SELECTNODE.SELECTEDINDEX].VALUE;
   
   GETELEMENTBYID("SELTEXT").INNERHTML="选中的内容:"+SELECTVALUE;
   VAR DIVOBJ=GETELEMENTBYID("TEXTCLASS")
   DIVOBJ.STYLE.TEXTTRANSFORM=SELECTVALUE;//直接设置STYLE对象中的样式属性TEXTTRANSFORM的值
  }
}

</SCRIPT>
select_1_1

3.级联select示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
<TITLE>级联选择</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
  FUNCTION SELECTPRO(){
  VAR PROCITY=[["--选择城市--"],["三门峡","平顶山","周口","驻马店"],
               ["泰安市","威海市","日照市","滨州市"],
               ["杭州市","温州市","嘉兴市","绍兴市 "],
                ["东城区","西城区","海淀区","朝阳区"]];
  VAR SELPRONODE=BYID("SELPRO");
  VAR SELCITYNODE=BYID("SELCITY");
  VAR ARRPRO=PROCITY[SELPRONODE.SELECTEDINDEX];

  //CLEARALL(SELCITYNODE);
   SELCITYNODE.OPTIONS.LENGTH=0;//最简单的一种清空方式

  FOR(VAR I=0;I<ARRPRO.LENGTH;++I){
    VAR OPTIONNODE=DOCUMENT.CREATEELEMENT("OPTION");
    SELCITYNODE.OPTIONS.ADD(OPTIONNODE);//或者使用SELCITYNODE.APPENDCHILD(OPTIONNODE);
    OPTIONNODE.INNERTEXT=ARRPRO[I];
  }
}

/*常规思路:删除元素*/
FUNCTION CLEARALL(SELCITYNODE){//下次选省前清空上次对应所有市
    VAR CHOICES=SELCITYNODE.OPTIONS
      FOR(VAR I=0;I<CHOICES.LENGTH;){ //OPTIONS.LENGTH在REMOVE的过程中时刻在变化
                                      //每删除一个,其余元素的索引-1;
   
            CHOICES.REMOVE(I);//该方法移除OPTIONS中指定INDEX元素
         
           //SELCITYNODE.REMOVECHILD(CHOICES[I]);//该方法的执行会引起OPTIONS集合元素索引变化,以及                                                 //OPTIONS.LENGTH变化,两种方法任选一种
     }
}
</SCRIPT>

</HEAD>

<BODY>
<SELECT ID="SELPRO" ONCHANGE="SELECTPRO()">
  <OPTION VALUE="NONE">--选择省市--</OPTION>
  <OPTION >河南</OPTION>
  <OPTION >山东</OPTION>
  <OPTION >浙江</OPTION>
  <OPTION >北京</OPTION>
</SELECT>
<SELECT ID="SELCITY">
  <OPTION>--选择城市--</OPTION>
</SELECT>
</BODY>
</HTML>
image

如果再有县等,那么就把县放到一个二维数组,二维数组的第一维和选中的市相对应,然后操作思想和上面相同

关于常规思路清空上次所有的OPTION:

//本想用WITH语句偷懒,没想到引发BUG
WITH(SELCITYNODE){
   IF(OPTIONS.LENGTH>1){//除了"选择"OPTION
        
         VAR LENGTH=OPTIONS.LENGTH;//OPTIONS.LENGTH在REMOVE的过程中时刻在变化
                                   //删除的个数(次数:删除LENGTH-1次)是不变的
          FOR(VAR I=1;I<LENGTH;++I)
            OPTIONS.REMOVE(1);
      }
   }
ALERT("LENGTH="+SELCITYNODE.OPTIONS.LENGTH);//3 //测试语句,以上使用WITH语句后,集合中的引用不能删除成功

关于WITH语句的BUG:HTTP://WWW.NEOEASE.COM/JAVASCRIPT-WITH-STATEMENT/

(1. Check box example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
< title > get checkbox selection < / Title >
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION SUM(){
VAR INPUTNODES=DOCUMENT. GETELEMENTSBYNAME("NOTEBOOK");
VAR SUM=0;
FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
IF(INPUTNODES[I].CHECKED)   
SUM+=PARSEINT(INPUTNODES[I].VALUE);
VAR SPANNODE=DOCUMENT. GETELEMENTBYID("SUMMONEY");
SPANNODE. INNERHTML="<FONT SIZE='7' COLOR='RED'>"+SUM+"</FONT>";
}
FUNCTION CHECKALL(INDEX){
//VAR CHECKALLNODE=DOCUMENT. GETELEMENTSBYNAME("CHECKALL")[INDEX];// It can also be used directly without passing in index
//EVENT. Srelement to complete
VAR INPUTNODES=DOCUMENT. GETELEMENTSBYNAME("NOTEBOOK");
FOR(VAR I=0;I<INPUTNODES.LENGTH;++I)
// INPUTNODES[I]. CHECKED=CHECKALLNODE. CHECKED;// Directly assigned to the state of the "select all" check box
INPUTNODES[I]. CHECKED=EVENT. SRCELEMENT. CHECKED;
}
</SCRIPT>
</HEAD>
<BODY>
< input type = "checkbox" name = "checkall" onclick = "checkall (0)" / > select all < br / >
< input type = "checkbox" name = "notebook" value = "4000" / > Lenovo notebook: 4000 yuan < br / >
< input type = "checkbox" name = "notebook" value = "3000" / > Dell notebook: 3000 yuan < br / >
< input type = "checkbox" name = "notebook" value = "5000" / > ASUS notebook: 5000 yuan < br / >
< input type = "checkbox" name = "notebook" value = "3500" / > ACER notebook: 3500 yuan < br / >
< input type = "checkbox" name = "notebook" value = "3500" / > ACER notebook: 3500 yuan < br / >
< input type = "checkbox" name = "notebook" value = "13500" / > Alienware Notebook: 13500 yuan < br / >
< input type = "checkbox" name = "checkall" onclick = "checkall (1)" / > select all < br / >
< input type = "button" onclick = "sum()" value = "calculate total amount" / > < span id = "summary" > < / span >
</BODY>
</HTML>
Checkbox shopping cart
2. Select application 1:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
< title > select dynamic effect < / Title >
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<STYLE TYPE="TEXT/CSS">
#TEXTCLASS{
BACKGROUND-COLOR:#FC6;
WIDTH:400PX;
HEIGHT:100PX;
}
#SELTEXT{
BACKGROUND-COLOR:#CCC;
WIDTH:200PX;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="TEXTCLASS">
EACH PRICK SILK HAS A GODDESS IN MY HEART.< BR/>
Every loser has a goddess in his heart
</DIV>
<BR/>
<BR/>
<SELECT ID="SELID" ONCHANGE="CHANGE()">
< option value = "None" > -- please select -- < / option >
< option value = "capitalization" > initial capital < / option >
< option value = "uppercase" > all capital letters < / option >
< option value = "lowercase" > all lowercase letters < / option >
</SELECT>
<BR/>
<BR/>
<DIV ID="SELTEXT">
Selected content: - please select--
</DIV>
</BODY>
</HTML>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION CHANGE(){
WITH(DOCUMENT){
VAR SELECTNODE=GETELEMENTBYID("SELID");
VAR OPTIONNODES=SELECTNODE. OPTIONS;
VAR SELECTVALUE=OPTIONNODES[SELECTNODE.SELECTEDINDEX]. VALUE;
GETELEMENTBYID("SELTEXT"). InnerHTML = "selected content:" + selectvalue;
VAR DIVOBJ=GETELEMENTBYID("TEXTCLASS")
DIVOBJ. STYLE. TEXTTRANSFORM=SELECTVALUE;// Directly set the value of the style attribute texttransform in the style object
}
}
</SCRIPT>
select_ 1_ one
3. Cascade select example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=UTF-8" />
< title > cascade selection < / Title >
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="JS/DOCUMENTTOOLS.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
FUNCTION SELECTPRO(){
Var industry = ["-- select city --"], ["Sanmenxia", "Pingdingshan", "Zhoukou", "Zhumadian"],
["Tai'an City", "Weihai City", "Rizhao City", "Binzhou City"],
["Hangzhou", "Wenzhou", "Jiaxing", "Shaoxing"],
["Dongcheng District", "Xicheng District", "Haidian District", "Chaoyang District"]];
VAR SELPRONODE=BYID("SELPRO");
VAR SELCITYNODE=BYID("SELCITY");
VAR ARRPRO=PROCITY[SELPRONODE.SELECTEDINDEX];
//CLEARALL(SELCITYNODE);
SELCITYNODE. OPTIONS. LENGTH=0;// The simplest way to empty
FOR(VAR I=0;I<ARRPRO.LENGTH;++I){
VAR OPTIONNODE=DOCUMENT. CREATEELEMENT("OPTION");
SELCITYNODE. OPTIONS. ADD(OPTIONNODE);// Or use selcitynode APPENDCHILD(OPTIONNODE);
OPTIONNODE. INNERTEXT=ARRPRO[I];
}
}
/*General idea: delete elements*/
Function clean all (selcitynode) {/ / clear all cities corresponding to the last time before the next province selection
VAR CHOICES=SELCITYNODE. OPTIONS
FOR(VAR I=0;I<CHOICES.LENGTH;) {/ / options.length changes from time to time in the process of remove
//Every time one is deleted, the index of other elements is - 1;
CHOICES. REMOVE(I);// This method removes the index element specified in options
//SELCITYNODE. REMOVECHILD(CHOICES[I]);// The execution of this method will cause the element index of the options collection to change, and / / options Length change, choose one of the two methods
}
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT ID="SELPRO" ONCHANGE="SELECTPRO()">
< option value = "None" > -- select provinces and cities -- < / option >
< option > Henan < / option >
< option > Shandong < / option >
< option > Zhejiang < / option >
<OPTION >
)



VAR, SELCITYNODE, OPTIONS, LENGTH


上一篇：DEBUG_NEW和THIS_FILE
下一篇：IOS - 快速入门

相关内容

使用道具 举报

返回列表 发布新资料或源码

Archiver|手机版|小黑屋|吾爱开源 |网站地图

Copyright 2011 - 2012 Lnqq.NET.All Rights Reserved( ICP备案粤ICP备14042591号-1粤ICP14042591号 )

关于本站 － 版权申明 － 侵删联系 － Ln Studio! － 广告联系

本站资源来自互联网，仅供用户测试使用，相关版权归原作者所有

快速回复 返回顶部 返回列表