动态设置form表单的元素值

因为经常用到的功能，所以我想到封装一个函数，用起来更方便快捷。。

先来看效果图如下：

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>