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获取和设置表单数据的更多相关文章

  1. jQuery 获取和设置表单元素

    jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值. 使用val()不带参数,表示获取元素的值 使用val()给定参数,则表示把值赋给元素 如下: ...

  2. jQuery 获取、设置表单元素的值

    获取表单元素值: 文本框,文本区域: $("#txt").attr("value"): 多选框 checkbox:$("#checkbox_id&qu ...

  3. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  4. Django框架获取各种form表单数据

    Django中获取text,password 名字:<input type="text" name="name"><br><br& ...

  5. Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

  6. Jquery如何序列化form表单数据为JSON对象

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

  7. 通过jquery的serializearray处理表单数据成json格式,并提交到后台处理

    var params = $("#myform").serializeArray(); var values = {}; for (var item in params) { va ...

  8. Flutter Form正确使用方法【可正确获取提交的表单数据】

    import 'package:flutter/material.dart'; void main() => runApp(new HomePage()); class HomePage ext ...

  9. jquery实现ajax提交表单数据或json数据

随机推荐

  1. 最小路径(prim)算法

    #include <stdio.h>#include <stdlib.h>/* 最小路径算法 -->prim算法 */#define VNUM 9#define MV 6 ...

  2. spark geoip

    import java.io.File import scala.io.Source import com.sanoma.cda.geoip.MaxMindIpGeo import com.sanom ...

  3. centos 查看cpu个数、核数

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  4. POI导出Excel的空值问题

    情景: 页面上的表格导出Excel,表格没数据导出的空格也要参与运算,结果在Excel上出错了 看图, 行-A.A12是没有数据的,后台代码cell.setCellValue("" ...

  5. Java http方式提交短信到短信网关

    URL url = new URL("短信网关url"); 一般短信内容需要用URLEncoder.encode()编码一下 HttpURLConnection httpCon = ...

  6. notification的使用

    示例: NotificationManager nm = (NotificationManager)getSystemService(Context.NOTIFICATION_SERVICE); No ...

  7. 天猫装修-全屏代码,和去掉10px

    淘宝装修,不支持float,和position属性 全屏代码 <div style="height:685px;"> <div style="paddi ...

  8. 服务器后台TCP连接存活问题

    0. 背景 公司的服务器后台部署在某一个地方,接入的是用户的APP,而该地方的网络信号较差,导致了服务器后台在运行一段时间后用户无法接入,那边的同事反馈使用netstat查看系统,存在较多的TCP连接 ...

  9. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  10. DESCryptoServiceProvider

    public static byte[] DESEncrypt(byte[] data, byte[] sKey) { return DESEncrypt(data, sKey, sKey); } / ...