jquery获取和设置表单数据
1.需求
正好做到设置和获取表单数据的功能,做个整理
2.计划安排

3.计划实施
1.获取值
<!--1获取普通文本框的值-->
<input type="text" id="a1"/> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('#submit').click(function () {
console.log($('#a1').val());
})
</script>
<!--2.获取checkbox是否打勾-->
<input type="checkbox" id="a1"/> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('#submit').click(function () {
//打勾返回true,没有打勾返回false
console.log($('#a1').is(":checked"));
})
</script>
<!--3.获取radio选中的value值-->
<input type="radio" name="age" value="1"/>
<input type="radio" name="age" value="2"/>
<input type="radio" name="age" value="3"/> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('#submit').click(function () {
console.log($('input[name="age"]:checked').val());
})
</script>
<!--4.获取选中的下拉框的值-->
<select name="" id="select">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
<option value="4">444</option>
</select> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('#submit').click(function () {
console.log($('#select').val());
$("#childmodel").find("option:selected").text();
}) </script>
2.设置值
<!--1设置普通文本框的值-->
<input type="text" id="a1"/> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('#a1').val(1111)
</script>
<!--2.设置checkbox打勾-->
<input type="checkbox" id="a1"/> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('#a1').attr('checked','checked');
</script>
<!--3.设置radio选中-->
<input type="radio" name="age" value="1"/>
<input type="radio" name="age" id="a2" value="2"/>
<input type="radio" name="age" value="3"/> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('#a2').attr('checked','checked');
</script>
<!--4.设置选中的下拉框的值-->
<select name="" id="select">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
<option value="4">444</option>
</select> <!--btn-->
<button id="submit">按钮</button>
<script src="jquery-1.8.3.min.js"></script>
<script>
//设置value=4的值为选中
$('#select').val('4');
//文本
var prov = document.getElementById(id);
for (var i = 0, len = prov.options.length; i < len; i++)
if (prov.options[i].text==text)
prov.selectedIndex = i;
</script>
4.总结
一些小东西总是容易忘,记录下来方便查找
jquery获取和设置表单数据的更多相关文章
- jQuery 获取和设置表单元素
jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值. 使用val()不带参数,表示获取元素的值 使用val()给定参数,则表示把值赋给元素 如下: ...
- jQuery 获取、设置表单元素的值
获取表单元素值: 文本框,文本区域: $("#txt").attr("value"): 多选框 checkbox:$("#checkbox_id&qu ...
- jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- Django框架获取各种form表单数据
Django中获取text,password 名字:<input type="text" name="name"><br><br& ...
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- Jquery如何序列化form表单数据为JSON对象
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- 通过jquery的serializearray处理表单数据成json格式,并提交到后台处理
var params = $("#myform").serializeArray(); var values = {}; for (var item in params) { va ...
- Flutter Form正确使用方法【可正确获取提交的表单数据】
import 'package:flutter/material.dart'; void main() => runApp(new HomePage()); class HomePage ext ...
- jquery实现ajax提交表单数据或json数据
随机推荐
- chown -R命令的使用
chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...
- 简单说说Tk和Tcl
开园第一个博客,简单说说Tk和Tcl. 我接触Tk和Tcl是在学习Python Tkinter时候,创建Tk对象,下面言归正传: Tcl:工具命令语言,英文全称为Tool Command Langua ...
- 整数分解 && 质因数分解
输入整数(0-30)分解成所有整数之和.每四行换行一次. 一种方法是通过深度优先枚举出解.通过递归的方式来实现. #include <stdio.h> #include <strin ...
- ubuntu 重启 nginx 失败,* Restarting nginx nginx ...fail!
ubuntu 重启 nginx 失败,* Restarting nginx nginx ...fail! 执行 nginx 重启服务时,提示失败如下: $ sudo service ngi ...
- parted命令详解
parted命令详解 用法:parted [选项]... [设备 [命令 [参数]...]...] 将带有“参数”的命令应用于“设备”.如果没有给出“命令”,则以交互模式运行. 帮助选项: ...
- <摘录>如何在64位linux强制编译32位应用程序
GDC注:因为需要解决在linux64机上编译32位的mongodb(没办法,因为编译的php是32位,然后我想将mongdb扩展添加到php中),在网上搜了很多文章,感觉这篇好懂,而且好用.我使用的 ...
- css让图片作为按钮的背景并且大小合适
最近在做ASP大作业,在做html页面的时候想把一个图片作为按钮的背景,搞了好久终于在csdn上找到了满意的答案: background-size: cover; 只需要这一句就ok了,就是这么简答. ...
- BufferedReader类
BufferedReader类用于从缓冲区中读取内容,多有的输入字节数据都将放在缓冲区中. BufferedReader中定义的构造方法只能接收字符输入流的实例,所以必须使用字符输入流和字节输入流的转 ...
- PetaPoco 使用总结(一)
PetaPoco 使用总结(一) 前段时间,公司的一个项目希望用一个ORM 的框架,通过对比 Dapper 和 PetaPoco ,虽然Dapper 功能很强大,速度更快. 但是最终还是选择了比较简单 ...
- 程序日志输出实现-Log4j
学习开发的过程中,我们都应该用过System.out.println():来做一些调试工作,有时候确实很有用有没有.但是这种简单粗暴的方式让程序中到处存在着sysout.这种方式难免会有性能的影响,维 ...