慕课WEB编程技术(第四章.JS练习)

￡神魔★判官ぃ 2023-07-13 03:56 74阅读 0赞

慕课西安交通大学.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 测试与作业

表格形表单的简单示例: 提交按钮和重置按钮实现,填写数据的打印和数据的清空
在这里插入图片描述

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>stuInfor</title>
  6.  <script>
  7.   function promptInfor(){
  8.    var name=document.getElementById("name").value;
  9.    var major=document.getElementById("major").value;
  11.    var hobby="";
  12.    var check=document.getElementsByName("hobby");
  13.    if(check!=null){
  14.     for(var i=0;i<check.length;i++){
  15.      if(check[i].checked==true){
  16.       hobby+=check[i].value+" ";
  17.      }
  18.     }
  19.    } 
  21.    var sex=null;
  22.    var radio=document.getElementsByName("sex");
  23.       for(var i=0;i<radio.length;i++){
  24.     if(radio[i].checked==true){
  25.            sex=radio[i].value;
  26.     }
  27.    }
  29.    window.alert("姓名:"+name+" 性别:"+sex+" 爱好:"+hobby+" 专业:"+major);
  30.   }
  32.   function clearInfor(){
  33.    document.getElementById("name").value="";
  34.    document.getElementById("major").value="";
  36.    var radio=document.getElementsByName("sex");
  37.    for(var i=0;i<radio.length;i++){
  38.     if(radio[i].checked==true){
  39.      radio[i].checked=false;
  40.     }
  41.    }
  43.    var check=document.getElementsByName("hobby");
  44.    for(var i=0;i<check.length;i++){
  45.     if(check[i].checked==true){
  46.      check[i].checked=false;
  47.     }
  48.    }
  49.    //$("input:radio[name='name值']").prop("checked",false);
  50.    //$("input:radio[name='name值'][value='value值']").prop("checked",true);
  51.   }
  52.  </script>
  53. </head>
  54. <body>
  55. <table width="254" height="281" border="1">
  56.   <tbody>
  57.     <tr>
  58.       <td width="41" align="center">
  59.     <strong>姓名:</strong></td>
  60.       <td width="197" align="center">  
  61.     <input type="text" id="name" name="name">
  62.   </td>
  63.     </tr>
  64.     <tr>
  65.       <td align="center">
  66.     <strong>性别:</strong></td>
  67.       <td align="center">
  68.     <input type="radio" name="sex" value="男" checked="checked">男
  69.     <input type="radio" name="sex" value="女">女
  70.     <input type="radio" name="sex" value="其他">其他</td>
  71.     </tr>
  72.     <tr>
  73.       <td align="center">
  74.     <strong>爱好:</strong></td>
  75.       <td>
  76.     <input type="checkbox" name="hobby" value="音乐">音乐
  77.     <input type="checkbox" name="hobby" value="体育">体育
  78.     <input type="checkbox" name="hobby" value="阅读">阅读
  79.    </td>
  80.     </tr>
  81.     <tr>
  82.       <td align="center">
  83.     <strong>专业:</strong>
  84.    </td>
  85.       <td align="center">
  86.     <input type="text" list="marjorlist" id="major" name="major">
  87.     <datalist id="marjorlist">
  88.     <option value="计算机">
  89.     <option value="经济与管理">
  90.     <option value="车辆">
  91.        </datalist>
  92.  </td>
  93.     </tr>
  94.     <tr>
  95.       <td colspan="2" align="center">
  96.   <input type="button" value="提交" onClick="promptInfor()">
  97.   <input type="button" value="重置" onClick="clearInfor()">    
  98.    </tr>
  99.   </tbody>
  100. </table>
  101. </body>
  102. </html>

在这里插入图片描述

5 下一章

博客地址:

发表评论

表情：
评论列表 （有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读