天天看點
傳回

慕課WEB程式設計技術(第四章.JS練習)

慕課西安交通大學.WEB程式設計技術.第四章.JavaScript.JS練習

  • ​​0 目錄​​
  • ​​4 JavaScript​​
  • ​​4.13 JS練習​​
  • ​​4.13.1 課堂重點​​
  • ​​4.13.2 測試與作業​​
  • ​​5 下一章​​

0 目錄

4 JavaScript

4.13 JS練習

4.13.1 課堂重點

4.13.2 測試與作業

表格形表單的簡單示例: 送出按鈕和重置按鈕實作,填寫資料的列印和資料的清空
慕課WEB程式設計技術(第四章.JS練習)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>stuInfor</title>
 <script>
  function promptInfor(){
   var name=document.getElementById("name").value;
   var major=document.getElementById("major").value;
    
   var hobby="";
   var check=document.getElementsByName("hobby");
   if(check!=null){
    for(var i=0;i<check.length;i++){
     if(check[i].checked==true){
      hobby+=check[i].value+" ";
     }
    }
   } 
   
   var sex=null;
   var radio=document.getElementsByName("sex");
      for(var i=0;i<radio.length;i++){
    if(radio[i].checked==true){
           sex=radio[i].value;
    }
   }
   
   window.alert("姓名:"+name+" 性别:"+sex+" 愛好:"+hobby+" 專業:"+major);
  }
  
  function clearInfor(){
   document.getElementById("name").value="";
   document.getElementById("major").value="";
   
   var radio=document.getElementsByName("sex");
   for(var i=0;i<radio.length;i++){
    if(radio[i].checked==true){
     radio[i].checked=false;
    }
   }
   
   var check=document.getElementsByName("hobby");
   for(var i=0;i<check.length;i++){
    if(check[i].checked==true){
     check[i].checked=false;
    }
   }
   //$("input:radio[name='name值']").prop("checked",false);
   //$("input:radio[name='name值'][value='value值']").prop("checked",true);
  }
 </script>
</head>
<body>
<table width="254" height="281" border="1">
  <tbody>
    <tr>
      <td width="41" align="center">
    <strong>姓名:</strong></td>
      <td width="197" align="center">  
    <input type="text" id="name" name="name">
  </td>
    </tr>
    <tr>
      <td align="center">
    <strong>性别:</strong></td>
      <td align="center">
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
    <input type="radio" name="sex" value="其他">其他</td>
    </tr>
    <tr>
      <td align="center">
    <strong>愛好:</strong></td>
      <td>
    <input type="checkbox" name="hobby" value="音樂">音樂
    <input type="checkbox" name="hobby" value="體育">體育
    <input type="checkbox" name="hobby" value="閱讀">閱讀
   </td>
    </tr>
    <tr>
      <td align="center">
    <strong>專業:</strong>
   </td>
      <td align="center">
    <input type="text" list="marjorlist" id="major" name="major">
    <datalist id="marjorlist">
    <option value="計算機">
    <option value="經濟與管理">
    <option value="車輛">
       </datalist>
 </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
  <input type="button" value="送出" onClick="promptInfor()">
  <input type="button" value="重置" onClick="clearInfor()">    
   </tr>
  </tbody>
</table>
</body>
</html>

5 下一章

js javascript i++ html
上一篇: hdu2029
下一篇: hdu2008

繼續閱讀