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数据
随机推荐
- jquery 图片浏览功能实现
效果展示: HTML代码: <div id="no3"> <img src="./img/last.png" id="last&qu ...
- CentOS7安装mysql5
CentOS7的yum源中默认没有mysql. 1. 下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5. ...
- awk多模式匹配
awk -F ':' '{if(($1 ~/wlan/)||( $1 ~/Cell/)||($1 ~/Quality*/)) {print $0}}'
- 史上最全的Linux常用命令
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- CentOS7 Mini安装Oracle(图形化安装)
以下操作在root用户下进行 1.mini版centos7没有ifconfig指令,可以如下操作 [root@localhost ~]# yum upgrade [root@localhost ~]# ...
- Python学习笔记——文件写入和读取
1.文件写入 #coding:utf-8 #!/usr/bin/env python 'makeTextPyhton.py -- create text file' import os ls = os ...
- Tomcat的目录结构、处理流程、主配置文件(server.xml)释义
参考资料: http://www.cnblogs.com/xdp-gacl/p/3744053.html http://grass51.blog.51cto.com/4356355/1123400 1 ...
- C#----使用WindowsMediaPlayer 同时播放多个声音
使用Windows Media Player 其实就是使用组件AxWindowsMediaPlayer. 添加两个引用:Interop.WMPLib.dll和AxInterop.WMPLib.dll. ...
- Python 开发与测试 Webservice(SOAP)
WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 理解WebService 1.从表面上看,WebService就是一个应用程序向外界暴露出一个能通过Web进行调用的API,也就是 ...
- 使用BLADE构建c++工程管理
使用BLADE构建c++工程管理 字数764 阅读2753 评论2 喜欢4 一. c++工程依赖管理 之前在百度一直使用comake2构建c++项目,十分方便.免去了手写Makefile的痛苦,很多项 ...