获取文本框、单选、多选框的值

最新推荐文章于 2022-08-10 23:44:20 发布

原创最新推荐文章于 2022-08-10 23:44:20 发布 · 918 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #文本框 #单选框 #多选框

本文介绍了如何使用JavaScript来获取文本框、单选框以及多选框的值。通过DOM操作，可以轻松获取这些表单元素的数据，为网页交互提供便利。

<input id="name" type="text"  placeholder="请输入账号">
<input id="password" type="password"  placeholder="请输入密码">
<div>
<label>男</label>
<input name="sex" type="radio" value="男">
</div>
<div>
<label>女</label>
<input name="sex" type="radio" value="女">
</div>
<div >
<label>吃饭</label>
<input name="checkbox1" value="吃饭" type="checkbox">
</div>
<div >
<label>睡觉</label>
<input name="checkbox1" value="睡觉" type="checkbox" checked>
</div>
<div >
<label>打豆豆</label>
<input name="checkbox1" value="打豆豆" type="checkbox" checked>
</div>


                       /*获取文本框里面的值*/
                        var name = document.getElementById("name").value;
                        var password = document.getElementById("password").value;

                        console.log("用户名：" + name + "，密码：" + password);

                        /*获取单选框里面的值*/
                        var radiotest = document.getElementsByName("sex");
                        var selectvalue = null; //selectvalue是radio中选中的值
                        for(i = 0; i < radiotest.length; i++) {
                            if(radiotest[i].checked == true) {
                                selectvalue = radiotest[i].value;
                                console.log("单选框的值是：" + selectvalue);
                                break;
                            }
                        }
                        /*获取复选框里面的值*/
                        var checkboxtest = document.getElementsByName("checkbox1");
                        var selectvalueArr = new Array();
                        for(i = 0; i < checkboxtest.length; i++) {
                            if(checkboxtest[i].checked == true) {
                                selectvalueArr.push(checkboxtest[i].value);
                            }
                        }
                        console.log("多选框的值是：");
                        for(i = 0; i < selectvalueArr.length; i++) {
                            console.log(selectvalueArr[i]);
                        }