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

63 阅读 0 评论 42 点赞

我是靠谱客的博主仁爱芹菜，最近开发中收集的这篇文章主要介绍简单实现根据选项显示不同的表单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

 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>