Run »
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <style type="text/css"> .group{margin: 10px 0; clear: both; display: flex;} .left{float: left; width: 120px; text-align: right;} .right{float: right; flex: 1;} .size{margin: 5px 0;} input[type='number']{width: 80px;} .show{width: 400px; height: 400px; overflow: auto;} input[type='button']{height: 40px;} div{margin-bottom: 10px;} </style> </head> <body> <form onSubmit="return false;"> <div class="group"> <div class="left">radio：</div> <div class="right"> <label for="radio-0"><input value="是" type="radio" name="radio" id="radio-0" />是</label> <label for="radio-1"><input value="否" type="radio" name="radio" id="radio-1" />否 </label> </div> </div> <div class="group"> <div class="left">checkbox：</div> <div class="right"> <label for="checkbox-0"><input value="0" type="checkbox" name="checkbox" id="checkbox-0" />0 </label> <label for="checkbox-1"><input value="1" type="checkbox" name="checkbox" id="checkbox-1" />1 </label> </div> </div> <div class="group"> <div class="left">input：</div> <div class="right"> <input type="text" name="input1" placeholder="正常" /> <input type="text" name="input2" value="已禁用" disabled /> </div> </div> <div class="group"> <div class="left">textarea：</div> <div class="right"> <textarea name="textarea"></textarea> </div> </div> <div class="group"> <div class="left">select：</div> <div class="right"> <select name="select" style="width: 100px;"> <option value="1">value=1</option> <option value="2">value=2</option> </select> </div> </div> <div><input type="button" id="fun1" value="转换1" /> <input id="fun2" type="button" value="转换2" /></div> <div style="color: red;">注意：disabled的input没有显示出来</div> <div>结果1：</div><div id="result1"></div> <div>结果2：</div><div id="result2"></div> </form> <script src="https://asset.cpming.top/js/lib/jquery.js"></script> <script src="https://asset.cpming.top/js/lib/json.js"></script> <script type="text/javascript"> $(function (){ $.fn.serializeObject = function(){ var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; } $("#fun1").click(function (){ var data = {}; $("form").serializeArray().map(function(x){ if (data[x.name] !== undefined) { if (!data[x.name].push) { data[x.name] = [data[x.name]]; } data[x.name].push(x.value || ''); } else { data[x.name] = x.value || ''; } }); $("#result1").html(JSON.stringify(data)); }); $("#fun2").click(function (){ var data = $("form").serializeObject(); $("#result2").html(JSON.stringify(data)); }); }); </script> </body> </html>