JavaScript事件處理學習（2）—單選按鈕複選框下拉框操做

時間 2019-12-09

標籤 javascript 事件處理學習單選按鈕複選框下拉欄目 JavaScript 简体版

原文原文鏈接

 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()函數中，並在函數中設置內容顯示到文本框中html