不知道大家是否遇到过这样的一种需求。（我遇到了，呵呵）表单里面有个单选，根据不同的选项显示不同的表单，然后提交不同数据。我之前用了一些笨方法去实现，（代码烂，不想贴），不过，现在想到了一个新的解决方法，我就写出来。
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>
PS：这是一种可行的方案，如有更好的方法请告诉我。