2020-12-08 JavaScript基础：获取表单的值案例

 <form >
        <!-- 文本 -->
        <input type="text" id="user"> <br/>
        <!-- 单选 -->
        男:<input type="radio" name="sex" value="男"> 
        女:<input type="radio" name="sex" value="女" checked> <br/>
        <!-- 复选 -->
        rap: <input type="checkbox" name="hobby" id="" value="rap" >
        篮球: <input type="checkbox" name="hobby" id="" value="basketball">
        跳舞: <input type="checkbox" name="hobby" id="" value="dance"> <br>

        <!-- 下拉 -->
        <select name="" id="city">
            <option value="陕西">陕西</option>
            <option value="山西">山西</option>
            <option value="河南">河南</option>
            <option value="河北">河北</option>
        </select>
        <br>

        <!-- 文本域 -->
        <textarea name="" id="text" cols="30" rows="10"></textarea> <br>

        <input type="button" value="提交" id="btn">

    </form>

// 获取提交按钮 dom

var btn= document.getElementById("btn");
//  添加点击事件
    btn.onclick=function(){
        // 获取 文本框
        var user=document.querySelector("#user").value;
        console.log("user:",user);
        //获取单选框的值
        var sexDom=document.getElementsByName("sex");
        // console.log("sexDom",sexDom)
        for(var i=0;i<sexDom.length;i++){
            // 判断选中 --- checked == true                        
            if(sexDom[i].checked == true){
                var sex= sexDom[i].value;
            }
        }
        console.log("sex:",sex)

        //获取复选框

        var hobbyDom=document.getElementsByName("hobby");
        var hobby=[];
        for(var j=0 ;j<hobbyDom.length;j++){
            if(hobbyDom[j].checked == true){
                hobby.push( hobbyDom[j].value )
            }
        }
        console.log("hobby:",hobby)

        // 下拉框
        var city=document.getElementById("city").value;
        console.log("city:",city)
        // 文本域
        var text=document.getElementById("text").value;
        console.log("text:",text)
        
    }