;!(function ($)
{
$.fn.setFormValue = function (options)
{
var $this = $(this); $.each(options, function (key, value)
{
var obj = $this.find("*[name=" + key + "]"); if (obj.attr("type") == "checkbox")
{
if ($.type(value) === "boolean")
{
obj.attr("checked", value);
} if ($.type(value) === "object")
{
$.each(value, function (i, item)
{
$this.find("*[name=" + key + "][value=" + i + "]").attr("checked", item);
})
}
}
else if (obj.attr("type") == "radio")
{
$this.find("*[name=" + key + "][value=" + value + "]").attr("checked", true);
}
else
{
obj.val(value);
}
})
} })(jQuery)

  

使用

$("#form").setFormValue({
"input": "zsw",//input标签
"textarea": "多行文本",//多行文本
"select":"2",//选择标签
"test": {
1: true,
2: false,
3: true
},//多选框
"checkboxtest": true,//多选框2
"radiotest":"2"
})

  

html代码

<form id="form">
<div class="form-group">
<label for="exampleInputEmail1">input</label>
<input type="text" class="form-control" name="input" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">input</label>
<textarea name="textarea"> </textarea>
</div>
<div class="form-group">
<label>select</label>
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="checkbox">
<div>
<label>
<input type="checkbox" name="test" value="1">
第一个
</label>
</div>
<div>
<label>
<input type="checkbox" name="test" value="2">
第二个
</label>
</div>
<div>
<label>
<input type="checkbox" name="test" value="3">
第三个
</label>
</div>
<div>
<label>
<input type="checkbox" name="test" value="4">
第四个
</label>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkboxtest">
第一个
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="radiotest" value="1">

</label>
<label>
<input type="radio" name="radiotest" value="2">

</label>
<label>
<input type="radio" name="radiotest" value="3">

</label>
</div>
<input type="button" value="确定" onclick="setValueTest()" />
</form>

  

jquery form表单赋值封装的更多相关文章

  1. 针对form表单赋值封装

    1 (function ($){ 2 $.fn.extend({ 3 exajax:function(url,opts,convert){ 4 var ajaxParam = { 5 url:url, ...

  2. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  3. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  4. Jquery form表单提交

    起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器 ...

  5. ajax上传文件 基于jquery form表单上传文件

    <script src="/static/js/jquery.js"></script><script> $("#reg-btn&qu ...

  6. 文档驱动 —— 表单组件(六):基于AntDV的Form表单的封装,目标还是不写代码

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 也不知道大家是怎么写代码的,这里全当抛砖引玉 为何封装? AntDV非常强大,效果也非常漂亮,功能强大, ...

  7. Jquery Form表单取值

    之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且na ...

  8. jQuery Form 表单提交插件-----ajaxSubmit() 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍  立即通过AJ ...

  9. jQuery Form 表单提交插件-----ajaxForm() 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxForm() 介绍  ajaxForm ...

随机推荐

  1. linux 下生成随机密码生成器

    [root@localhost ~]# yum -y install pwgen [root@localhost ~]# pwgen -ncCyB1 8 1 kei%b3Xa [root@localh ...

  2. Linux 邮件服务

    三个要点 1.smtp协议 2.搭建本地邮件服务器 3.使用外部邮件服务器 实现邮件功能 1.smtp协议           SMTP(Simple Mail Transfer Protocol)即 ...

  3. centos容器yum安装JDK环境

    1.yum命令安装jdk 选择版本安装 -openjdk java--openjdk-devel 或者如下命令,安装jdk1.8.0的所有文件 -openjdk*yum install -y java ...

  4. input禁止输入后,触发事件,在苹果手机的页面会滚动

    在vue中,<input type="text" readonly="readonly" @click=""/>,点击跳转页面. ...

  5. 简单了解css3样式表写法和优先级

    css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  6. Linux学习Day3:新手必须掌握的Linux命令(二)

    今天学习的命令都是运维工作中经常要用到的,非常实用,必须要用心学习,争取把这些命令烂熟于心,具体内容如下: 一.系统状态监测命令 1.ifconfig命令 用于获取网卡配置与网络状态等信息. [roo ...

  7. markdown语法链接新页面打开

    我们在写markdown语法的文章时,经常会写超链接,默认markdown的写法超链接打开页面都是在当前页面,对自己页面的访问不是很好,所以我们一般都希望在新页面打开.但是据我对markdwon的语法 ...

  8. sql的一般查询语句(增删改查中的查)

    /*例子 判断规则 http://xxx.xxx/new.php?id=57 and 1=1 正确 http://xxx.xxx/new.php?id=57 and 1=2 错误 http://xxx ...

  9. JS简易计算器的实现,以及代码的优化

    用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  10. spring mvc5 的 配置文件 pom.xml

    spring mvc5 的 配置文件  pom.xml <?xml version="1.0" encoding="UTF-8"?> <pro ...