剑轩

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

电脑版发表于:2016/10/11 17:20

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>


关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢