zoukankan      html  css  js  c++  java
  • JavaScript事件处理 学习(2)—单选按钮 复选框 下拉框操作

     1 <html>
     2 <head>
     3 <title>dsd</title>
     4     <script language="JavaScript">
     5     function show1(){
     6  var name=document.myform.name.value    //保存姓名
     7  alert("姓名"+name);
     8    var sex;                               //保存性别
     9    if(document.myform.sex[0].checked){   //如果第一个元素被选中
    10    sex=document.myform.sex[0].value;
    11  }else {sex=document.myform.sex[1].value;}
    12       alert("性别"+sex);
    13  var ints="";                            //保存爱好
    14  for(i=0;i<=document.myform.int.Length;i++)
    15  if(document.myform.int[i].checked)       //判断是否被选中
    16  ints+=document.myform.int[i].value;
    17 alert("爱好"+ints);
    18  } 
    19    function show2(val){                  //修改文本框显示
    20    document.myform.result.value=val;
    21    
    22    }
    23  </script>  
    24 </head>
    25 <body>
    26    <form action=""method="post"name=myform>
    27    姓名:<input type="text"name="name"><br>
    28    性别:<input type="radio"name="sex" value="男">29          <input type="radio"name="sex" value="女">女<br>
    30          <input type="checkbox"name="int" value="唱歌">唱歌
    31      <input type="checkbox"name="int" value="睡觉">睡觉
    32      <input type="checkbox"name="int" value="吃饭">吃饭<br>
    33       <input type="button"value="显示"onclick="show1()"><br>
    34     部门:<select name="dept" onChange="show2(this.value)">  //触发事件传递到show2()中
    35            <option value="产品部">产品部</option>
    36        <option value="销售部">销售部</option>
    37        <option value="财务部">财务部</option>
    38        </select>
    39     结果:<input type="text" name="result" value="">
    40  
    41 </body>
    42 </html>

    本程序在表单分别定义了文本框 单选按钮 复选按钮 如果两个单选按钮名称一样,则要采用数组形式分别判断哪个控件被选中;多了可通过循环方式取出每一个选中的内容。
    本程序还定义了一个下拉菜单和一个文本框,在下拉框列表中一旦触发onchange事件,则会将当前选中的结果this.value传递到show2()函数中,并在函数中设置内容显示到文本框中

  • 相关阅读:
    在线漏洞检测网站
    渗透测试工具库
    端口利用解析
    Linux安全脚本
    Linux常见系统故障
    Oracle
    Redis和MongoDB区别
    MHA在监控和故障转移时都做了什么
    Oracle 11g Dataguard参数详解
    Oracle
  • 原文地址:https://www.cnblogs.com/anuo007/p/3543389.html
Copyright © 2011-2022 走看看