您的位置：首页 > 其它

简单实现根据选项显示不同的表单

2017-04-27 13:26 489 查看 
1 <!DOCTYPE html>
2 <html>
3
4     <head>
5         <meta charset="utf-8" />
6         <title>动态表单提交</title>
7     </head>
8
9     <body>
10         <form id="questionForm">
11             名字:
12             <input type="text" value="" name="username"></input>
13             <br/> 性别: 男
14             <input type="radio" value="0" name="sex" checked></input>
15             女<input type="radio" value="1" name="sex"></input>
16             <div class="boy" style="display: none;">
17                 喜欢什么样的女生：<br/>
18                 <textarea id="textarea"></textarea>
19             </div>
20             <div class="girl" style="display: none;">
21                 男生的哪一点更吸引你？<br/> A.外表相貌
22                 <input type="radio" value="A" name="advantage" checked></input>
23                 B.家庭状况<input type="radio" value="B" name="advantage"></input>
24             </div>
25             <button type="submit">提交</button>
26         </form>
27         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
28         <script>
29             $(function() {
30
31                 var sexRadio = $("input:radio[name=‘sex‘]");
32                 var sex = $("input:radio[name=‘sex‘]:checked").val();
33                 var formJson = {};
34                 //初始化拓展表单
35                 showExpandDiv(sex);
36                 //监听性别单选变化
37                 sexRadio.change(function() {
38                     for(i = 0; i < sexRadio.length; i++) {
39                         if(sexRadio[i].checked) {
40                             sex = sexRadio[i].value;
41                             showExpandDiv(sex);
42                         }
43                     }
44                 });
45                 //显示对应拓展表单
46                 //@param sex
47                 function showExpandDiv(sex) {
48                     //判断性别值，0为男，1为女
49                     if(sex == 0) {
50                         var boy = $("#textarea").val();
51                         //显示boy表单
52                         $(".boy").show();
53                         $(".girl").hide();
54                         //移除girl数据
55                         delete formJson.girl;
56                         //添加boy数据
57                         formJson.boy = boy;
58                     } else {
59                         var girl = $("input:radio[name=‘advantage‘]:checked").val();
60                         //显示girl表单
61                         $(".girl").show();
62                         $(".boy").hide();
63                         //移除boy数据
64                         delete formJson.boy;
65                         //添加girl数据
66                         formJson.girl = girl;
67                     }
68                 }
69
70                 //提交表单
71                 $("#questionForm").submit(function() {
72                     var name = $("input[name=‘username‘]").val();
73                     formJson.name = name;
74                     formJson.sex = sex;
75                     showExpandDiv(sex);
76                     alert(JSON.stringify(formJson))
77                 });
78
79             });
80         </script>
81     </body>
82
83 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航