JS获取表单的值

版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创!


恰饭广告




<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
.big_box {
    margin: auto;
    width: 500px;
    height: 400px;
    border: 1px solid black;
}
</style>
    <script type="text/javascript">
        //全选与全不选效果
        function Choose(){
            var All_checkbox = document.getElementsByName("choose");
            //判断checkbox数组的第一个是否选中 true为选中
            if(document.getElementsByName("clear")[0].checked==true){
                //循环所有checkbox
                for(var i=0;i<=All_checkbox.length;i++){
                All_checkbox[i].checked=true;
                }
            }
            else{
                for(var i=0;i<=All_checkbox.length;i++){
                All_checkbox[i].checked=false;
                    }
                }
            }
        //Dom
        function Dom(){
            var myname=document.getElementById("name").value;
            if(myname==""){
                alert("名字不能为空");
            }
        var Major = document.getElementsByName("sub");
            var subject = "";//定义一个空值 然后赋值给它
        for(var j = 0; j<= Major.length -1; j++){
             if(Major[j].checked == true){
                subject = Major[j].value;
                }
            }
        var All_checkbox = document.getElementsByName("choose");
            var hobby = "";
            for(var k = 0; k<= All_checkbox.length -1; k++){
            if(All_checkbox[k].checked == true){
                hobby = hobby+All_checkbox[k].value;
                }
            }
            document.getElementById("result").innerHTML="名字:"+myname+"<br />"+"所属专业:"+subject+"<br />" + "兴趣爱好:"+hobby;
        }
    </script>
    </head>
    <body>
    <div class="big_box">
      <table width="500">
        <tbody>
          <tr>
            <td align="right">姓名</td>
            <td colspan="3"><input type="text" id="name" style="width: 370px;height: 20px;"></td>
          </tr>
          <tr>
            <td rowspan="3" align="right">所属专业</td>
            <td><input type="radio" name="sub" value="网络工程">
              网络工程</td>
            <td><input type="radio" name="sub" value="软件开发">
              软件开发</td>
            <td><input type="radio" name="sub" value="商务营销">
              商务营销</td>
          </tr>
          <tr>
            <td><input type="radio" name="sub" value="汽车维修">
              汽车维修</td>
            <td><input type="radio" name="sub" value="机械制造">
              机械制造</td>
            <td><input type="radio" name="sub" value="冶金矿产">
              冶金矿产</td>
          </tr>
          <tr>
            <td><input type="radio" name="sub" value="林牧渔">
              林牧渔</td>
            <td><input type="radio" name="sub" value="建筑">
              建筑</td>
            <td> </td>
          </tr>
          <tr>
            <td align="right">兴趣爱好</td>
            <td><input type="checkbox" value="" onClick="Choose()" name="clear">
              全选/全不选</td>
            <td colspan="2"> </td>
          </tr>
          <tr>
            <td rowspan="3"></td>
            <td><input type="checkbox" name="choose" value="打篮球 ">
              打篮球</td>
            <td><input type="checkbox" name="choose" value="踢足球 ">
              踢足球</td>
            <td><input type="checkbox" name="choose" value="电子竞技 ">
              电子竞技</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="choose" value="跑步 ">
              跑步</td>
            <td><input type="checkbox" name="choose" value="游泳 ">
              游泳</td>
            <td><input type="checkbox" name="choose" value="旅游 ">
              旅游</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="choose" value="看书 ">
              看书</td>
            <td><input type="checkbox" name="choose" value="购物 ">
              购物</td>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
            <td><input type="submit" value="确认" onClick="Dom()" style="width: 100px;height: 40px;"></td>
            <td colspan="2"></td>
          </tr>
        </tbody>
      </table>
      <!-- 输出 -->
      <p id="result"></p>
    </div>
</body>
</html>  

原文链接:https://www.idaobin.com/archives/233.html

让我恰个饭吧.ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中



恰饭广告

发表评论

电子邮件地址不会被公开。 必填项已用*标注

× 6 = 36