js中获取用户输入的信息

最新推荐文章于 2024-06-05 09:36:55 发布

黑猫的猫

最新推荐文章于 2024-06-05 09:36:55 发布

阅读量4k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53653315/article/details/124180777

版权

一：页面

 用户名: <input type="text" id="name" class="myinput" /><br />
    密码: <input type="password" id="pwd" class="myinput" /><br />
    性别: <input type="radio" id="girl" name="sex" value="女" checked dataid="1" />女
    <input type="radio" id="boy" name="sex" />男<br />
    年龄: <input type="number" id="age" min="15" max="35" value="15" /><br />
    喜欢的颜色: <input type="checkbox" value="蓝色" class="color" />蓝色
    <input type="checkbox" value="红色" class="color" />红色
    <input type="checkbox" value="黄色" class="color" />黄色
    <input type="checkbox" value="白色" class="color" />白色
    <input type="checkbox" value="绿色" class="color" />绿色<br />
    省份:<select id="province">
        <option>河南</option>
        <option>河北</option>
        <option>山东</option>
        <option>山西</option>
    </select><br />
    <button id="btn" class="subbtn">提交</button>

二：获取数据

 window.onload = function () {
            btn.onclick = function () {
                //通过ID获取用户名和密码
                var name = document.getElementById("name").value;
                console.log(name);
                var pwd = document.getElementById("pwd").value;
                console.log(pwd);
                //通过css样式获取元素
                var rs = document.getElementsByClassName("myinput");
                console.log(rs[0].value + " " + rs[1].value);
                //获取性别
                var sex1 = document.getElementById("girl");
                console.log(sex1.getAttribute("dataid"));
                var sex = sex1.checked ? "女" : "男";
                console.log(sex);
                //获取年龄
                var age = document.getElementById("age").value;
                console.log(age);
                //获取喜欢的颜色
                var inputs = document.getElementsByClassName("color");
                var str = "";
                for (var i in inputs) {
                    if (inputs[i].type == "checkbox" && inputs[i].checked) {
                        console.log(inputs[i].value)
                        str += inputs[i].value + "";
                    }
                }
                console.log("你喜欢的颜色是：" + str);
                //处理用户选中的身份
                var options = document.getElementById("province").children;
                for (var i in options) {
                    if (options[i].selected) {
                        console.log(options[i].textContent);
                    }
                }
            }
        }

三：结果：