IT大道IT大道

首页 >  技术 > 关于使用javascript设置,读取,判断表单的小例子

关于使用javascript设置,读取,判断表单的小例子

原文 http://blog.csdn.net/sofeien/article/details/54353638 2017-01-11 23:11:20 0 评论
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>我的网页</title>
    <link href="http://blog.csdn.net/sofeien/article/details/mycss.css" rel="stylesheet" type="text/css">
    <style>
        button:hover {
            color: red;
            cursor: pointer;
        }

    </style>
    <script src="http://blog.csdn.net/sofeien/article/details/jquery-3.1.1.js"></script>
    <script>
        $(function() {
            var writeMsgBtn = $('#writeMsg');
            var readMsgBtn = $('#readMsg');
            var name = $('input[name=user]');
            var pwd = $('input[name=pwd]');
            var location = $('[name=from]');
            var sexy = $('input[value=http://blog.csdn.net/sofeien/article/details/man]');
            var fav = $('input[name=fav]');
            var info = $('#info');
            var checkBtn = $('#checkMsg');

            writeMsgBtn.click(function() {
                name.val('张三');
                pwd.val('123456');
                location.val('湖南');
                sexy.prop("checked", true);
                fav.prop("checked", true);
            });
            readMsgBtn.click(function() {
                var txt = "";
                txt = txt + '姓名:' + name.val() + "<br>";
                txt = txt + '密码:' + pwd.val() + "<br>";
                txt = txt + '籍贯:' + location.val() + "<br>";
                txt = txt + '性别:' + $('input[type=radio][name=sex]:checked').val() + "<br>";
                txt = txt + '爱好:' + $('input[type=checkbox][name=fav]:checked').map(function() {
                    return $(this).val();
                }).get() + "<br>";
                info.html(txt);
            });
            checkBtn.click(function() {
                var txt = sexy.is(":checked") + "<br>";
                txt += $('input[value=http://blog.csdn.net/sofeien/article/details/swimmingg]').is(":checked");
                info.html(txt);
            });
        });

    </script>
</head>

<body>
    <form id="f" onsubmit="return false">
        <fieldset>
            <legend>个人信息</legend>
            <p><label>姓名:<input type="text" name="user"/></label></p>
            <p><label>密码:<input type="password" name="pwd"/></label></p>
            <p><label>籍贯:<select name="from">
            <option value="http://blog.csdn.net/sofeien/article/details/湖北">湖北</option>
            <option value="http://blog.csdn.net/sofeien/article/details/湖南">湖南</option>
            <option value="http://blog.csdn.net/sofeien/article/details/广州">广州</option>
            </select></label></p>
            <p>性别:<label><input type="radio" name="sex" value="http://blog.csdn.net/sofeien/article/details/man"/>男</label>
                <label><input type="radio" name="sex" value="http://blog.csdn.net/sofeien/article/details/woman"/>女</label></p>
            <p>爱好:<label><input type="checkbox" name="fav" value="http://blog.csdn.net/sofeien/article/details/read"/>读书</label>
                <label><input type="checkbox" name="fav" value="http://blog.csdn.net/sofeien/article/details/run"/>跑步</label>
                <label><input type="checkbox" name="fav" value="http://blog.csdn.net/sofeien/article/details/swimmingg"/>游泳</label></p>
            <button type="submit">提交</button>
        </fieldset>
    </form>
    <p><button id="writeMsg">JS写入</button>
        <button id="readMsg">JS读取</button>
        <button id="checkMsg">JS判断</button>
    </p>
    <p id="info"></p>
</body>

</html>

猜你喜欢