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

来源：互联网发布：饥荒修改数据没用编辑：程序博客网时间：2024/05/31 18:47
<!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" 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="湖北">湖北</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>
0 0