<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> </head> <body> <form> <p> <label for="username">用户名</label> <input type="text" id="username" placeholder="请输入用户名"> </p> <p> <label for="nickname">昵称</label> <input type="text" id="nickname" placeholder="输入一个昵称"> </p> <p> <label for="password">密码</label> <input type="password" id="password"> </p> <p> <label for="passwordchecked">确认密码</label> <input type="password" id="passwordchecked"> </p> <p> <label for="sex">性别</label> <select id="sex"> <option value="male">男</option> <option value="female">女</option> </select> </p> <p> <label for="">爱好</label> <label> <input type="checkbox" name="dx" value="1">旅游</label> <label> <input type="checkbox" name="dx" value="2">睡觉</label> <label> <input type="checkbox" name="dx" value="3">上网</label> <label> <input type="checkbox" name="dx" value="4">看电影</label> </p> <p> <label for="">是否已婚</label> <label> <input type="radio" value="1" name="married">是</label> <label> <input type="radio" value="0" name="married">否</label> </p> <div class="center"> <input type="hidden" value="注册表单"> <input type="button" value="返回" /> <button type="submit">提交</button> <button type="reset">重置</button> </div> </form> <div class="msg"></div> </body> </html>
<script src="../jquery-1.12.0.js"></script>
<script type="text/javascript"> $(function(){ // @作业 // 点击提交按钮时,把输入的内容按顺序放到.msg $(‘form‘).css(‘float‘, ‘left‘); $(‘.msg‘).css({float:‘right‘,width:400,height:400,background:‘#89abec‘,padding:20}); $(‘:submit‘).click(function(e){console.log(111) e = e || window.event var username = $(‘#username‘).val() var nickname = $(‘#nickname‘).val() var password = $(‘#password‘).val() var sex = $(‘select option:selected‘).text() var arr1 = [] $(‘input[type = "checkbox"]:checked‘).each(function(){ arr1.push($(this).parent().text()) }) var radio = $(‘input[type="radio"]:checked‘).parent().text() $(‘.msg‘).html(‘用户名:‘ +username+ ‘<br>昵称:‘ +nickname+ ‘<br>密码:‘ +password+ ‘<br>性别:‘ +sex+ ‘<br>爱好:‘+ arr1+ ‘<br>是否已婚:‘ +radio) e.preventDefault() }) }) </script>
用户名
昵称
密码
确认密码
性别
男
女
爱好 旅游 睡觉 上网 看电影
是否已婚 是 否
提交 重置
时间: 2024-10-17 18:10:47