故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

js获取文本框,单选框,复选框,下拉列表等值

2961人阅读 2016/10/11 17:20 总访问:3919078 评论:0 收藏:0 手机
分类: 前端

html:

<form id="form1" runat="server">
    <div>

        <table>
            <tr>
                <td>用户名:
                </td>
                <td>
                    <input type="text" id="username" />
                </td>
            </tr>
            <tr>
                <td>密码:
                </td>
                <td>
                    <input type="password" />
                </td>
            </tr>
            <tr>
                <td>性别:
                </td>
                <td>
                    <input type="radio" name="sex" checked="checked" value="男" />男
                        <input type="radio" name="sex" value="女" />女
                        <input type="radio" name="sex" value="保密" />保密
                </td>
            </tr>
            <tr>
                <td>爱好:
                </td>
                <td>
                    <input type="checkbox" name="hobby" value="王者" />王者
                    <input type="checkbox" name="hobby" value="羽毛球" />羽毛球
                    <input type="checkbox" name="hobby" value="篮球" />篮球
                </td>
            </tr>
            <tr>
                <td>工作:
                </td>
                <td>
                    <select id="work">
                        <option value="1">软件工程师</option>
                        <option value="2">UI设计师</option>
                        <option value="6" selected="selected">挖掘机</option>
                        <option value="7">厨师</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="regbutton" value="注册" />
                </td>
            </tr>
        </table>

    </div>
</form>

js:

<script>

    //通过id拿到按钮
    var regbutton = document.getElementById("regbutton");
    //绑定事件
    regbutton.onclick = function () {

        //获取用户名
        var username = document.getElementById("username");
        if (username.value == "" || username.value == null) {
            alert("用户名不能为空!");
            return;
        }

        //获取选中的性别
        var sexs = document.getElementsByName("sex");
        for (var i = 0; i < sexs.length; i++) {

            if (sexs[i].checked) {
                alert(sexs[i].value);
            }
        }

        //获取爱好
        var hobby = document.getElementsByName("hobby");
        for (var i = 0; i < hobby.length; i++) {
            if (hobby[i].checked) {
                alert(hobby[i].value);
            }
        }

        //获取工作
        var work = document.getElementById("work");
        alert(work.value);

        //获取text方法1:
        var options = work.getElementsByTagName("option");
        for (var i = 0; i < options.length; i++) {
            if (options[i].selected)
                alert(work[i].text);
        }
        //获取text方法2:
        for (var i = 0; i < work.length; i++) {
            if (work[i].selected) {
                alert(work[i].text);
            }
        }

    }


</script>


欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价