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数据
随机推荐
- 【原】redux学习笔记
上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...
- 适可而止:YAGNI原则
适可而止:You Ain't Gonna Need It YAGNI原则指的是只需要将应用程序必需的功能包含进来,而不要试图添加任何其他你认为可能需要的功能. 在一个软件项目中,往往80%的时间花费在 ...
- Eclipse中修改Web项目的URL访问路径
背景 访问路径,也就是指在浏览器中访问该web系统时的根路径,比如http://localhost:8080/xxxx/index.jsp 这里的xxxx,也就是request.getContext ...
- MBProgressHUD上传照片进度提示
第一步,控制器先来个属性 @property (strong, nonatomic) MBProgressHUD *HUD; 第二步,显示与隐藏的调用方法 - (void)hudTipWillShow ...
- 一个有趣的模拟光照的shader
一个有趣的模拟光照的shader(类似法线贴图) http://www.cnblogs.com/flytrace/p/3395911.html ----- 可否用于需UI中需要加灯的模型.
- php Hash Table(一) Hash Table的结构
关于Hash Table专题: 一直想深入理解一下php的hash table的实现,以前一直是星星点点的看看,从未彻底的总结过,那就从这个专题开始吧! 主要想总结几个部分:hashtable结构,h ...
- PHP file_get_contents设置超时处理方法
从PHP5开始,file_get_content已经支持context了(手册上写着:5.0.0 Added the context support. ),也就是说,从5.0开始,file_get_c ...
- Tomcat服务器原理详解
[目录]本文主要讲解Tomcat启动和部署webapp时的原理和过程,以及其使用的配置文件的详解.主要有三大部分: 第一部分.Tomcat的简介和启动过程 第二部分.Tomcat部署webapp 第三 ...
- 查找“CDN、负载均衡、反向代理”等大型网络真实IP地址的方法
首先,CDN.负载均衡.反向代理还分为很多层,有时查出来的是最外层的 CDN 服务器群,真实的机器是不对外开放的,类似这样的: 用户 → CDN 网络 → 一台或多台真实机器 ↗ CDN Server ...
- Jquery中$.load(),$.get(),$.post(),$.ajax(),$.getJSON()的作用与不同
这个五个都是获取页面或者数据的方法.. 都是基于Ajax协议的.. $.get(url,[data],[callback]) //描述: 从服务器加载数据,请求方式为GET. url ...