<!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>
