因为经常用到的功能，所以我想到封装一个函数，用起来更方便快捷。。
先来看效果图如下：
var data = {a:'aaaa', b:'2', 'c':[1,2,4]}
这就相当于 ajax 返回的json, 元素是通过 name 来查找的, 其基本形式: name : value
checkbox 比较特殊,它是多个并存,所以要 "选中" 它得通过值来查找, 值对上了,就把它"选中"
当然, 还有清除数据的情况:
var data = {a:'', b:'', 'c':''}
像这样,设置为空值,就可以了。
说到这里，是不是很好玩呀？
ok，下面就是基于 jqery 写的代码：
<form id="form1" > <input type="text" name="a" />
<br/>
<input type="radio" name="b" value="1" checked />1
<input type="radio" name="b" value="2" />2
<input type="radio" name="b" value="3" />3
<br/>
<input type="checkbox" name="c[]" value="1" />a
<input type="checkbox" name="c[]" value="2" />b
<input type="checkbox" name="c[]" value="3"/>c
<input type="checkbox" name="c[]" value="4"/>d
</form>
<script type="text/javascrip">
//编辑表单
$.fn.formEdit = function(data){
//data = {"text":"value", "checkbox":[1,2,4], "radio":"10"}; if(typeof data == "undefined"){
this.reset();
return this;
}
return this.each(function(){var input, name;
for(var i = 0; i < this.length; i++){
input = this.elements[i];
//修正checkbox
if(input.type == "checkbox"){
name = input.name.replace(/(.+)\[\]$/, "$1");
}else{
name = input.name;
}
if(typeof data[name] == "undefined") continue;
switch(input.type){
case "checkbox": if(data[name] == ""){
input.checked = false;
}else{
//数组查找元素
if(data[name].indexOf(input.value) > -1){
input.checked = true;
}else{
input.checked = false;
}
}
}
break;
case "radio":
if(data[name] == ""){
input.checked = false;
}else if(input.value == data[name]){
input.checked = true;
}
break;
default: input.value = data[name];
}
}
}) }; data = {
"a":"张三",
"b":[1,3,4],
"c":"2",
};
$('#form1').formEdit(data);
</script>