<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Jquery实现数据双向绑定(赋值和取值)</title> <link href="~/Css/css.css" rel="stylesheet" /> <script src="~/Js/jquery.min.js"></script> <script> $(document).ready(function () { var objData = { 'id': 1, 'name': '张三', 'area': 'futian', 'sex': 'male', 'hobby': 'music,movie', 'intro': '你好,世界' }; //将数据加载到表单中 $.mloadData(objData); //读取表单中的数据 提交 $("#btnSave").click(function () { var data = $.mSaveData(objData); console.log(data); }); }); /* *双向数据绑定(赋值) *param objData 源对象 *return */ $.mloadData = function (objData) { var obj = objData; var key, value, tagName, type, arr; for (x in obj) { key = x; value = obj[x]; $("[name='" + key + "']").each(function () { tagName = $(this)[0].tagName; type = $(this).attr('type'); if (tagName == 'INPUT') { if (type == 'radio') { $(this).attr('checked', $(this).val() == value); } else if (type == 'checkbox') { arr = value.split(','); for (var i = 0; i < arr.length; i++) { if ($(this).val() == arr[i]) { $(this).attr('checked', true); break; } } } else { $(this).val(value); } } else if (tagName == 'SELECT' || tagName == 'TEXTAREA') { $(this).val(value); } }); } }; /* *双向数据绑定(取值) *param objData 源对象 *return */ $.mSaveData = function (objData) { var tagName, type; for (x in objData) { $("[name='" + x + "']").each(function () { tagName = $(this)[0].tagName; type = $(this).attr('type'); if (tagName == 'INPUT') { if (type == 'radio') { objData[x] = $("input[name='" + x + "']:checked").attr("value"); } else if (type == 'checkbox') { var checkValue = []; $("input[name='" + x + "']:checked").each(function () { checkValue.push($(this).val()); }); objData[x] = checkValue.join(","); } else { objData[x] = $(this).val(); } } else if (tagName == 'SELECT' || tagName == 'TEXTAREA') { objData[x] = $(this).val(); } }); } return objData; }; </script> </head> <body> <div> <form id="myform" method="post" action=""> <fieldset> <legend>jquery数据双向绑定</legend> <table> <tr> <td>姓名</td> <td> <input type="hidden" name="id" /> <input type="text" name="name" /> </td> </tr> <tr> <td>地区</td> <td> <select name="area"> <option value="futian">福田区</option> <option value="nanshan">南山区</option> <option value="luohu">罗湖区</option> </select> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女 </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby" value="movie" />电影 <input type="checkbox" name="hobby" value="music" />音乐 <input type="checkbox" name="hobby" value="basketball" />篮球 </td> </tr> <tr> <td>简介</td> <td> <textarea name="intro"></textarea> </td> </tr> <tr> <td colspan="2" style="text-align:center;"> <input id="btnSave" type="button" value="提交" /> </td> </tr> </table> </fieldset> </form> </div> </body> </html>