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

最新推荐文章于 2022-11-13 08:10:32 发布

侠之大者为国为民

最新推荐文章于 2022-11-13 08:10:32 发布

阅读量647

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/sofeien/article/details/54353638

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

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

    </style>
    <script src="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=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=swimmingg]').is(":checked");
                info.html(txt);
            });
        });

    </script>
</head>

<body>
    <form id="f" οnsubmit="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="湖北">湖北</option>
            <option value="湖南">湖南</option>
            <option value="广州">广州</option>
            </select></label></p>
            <p>性别:<label><input type="radio" name="sex" value="man"/>男</label>
                <label><input type="radio" name="sex" value="woman"/>女</label></p>
            <p>爱好:<label><input type="checkbox" name="fav" value="read"/>读书</label>
                <label><input type="checkbox" name="fav" value="run"/>跑步</label>
                <label><input type="checkbox" name="fav" value="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>