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. PHP 数据库抽象层pdo

    PDO是PHP数据对象(PHP Data Object)的缩写. pdo就是一个"数据库访问抽象层",作用是统一各种数据库的访问接口,能够轻松地在不同数据库之间进行切换,使得数据库 ...

  2. docker image重命名

    use docker tag command tag Tag an image into a repository

  3. libuv(不断更新)

    /* * Initialize the uv_async_t handle. A NULL callback is allowed. * * Note that uv_async_init(), un ...

  4. Nginx下配置ThinkPHP的URL Rewrite模式和pathinfo模式支持

    前面有关于lnmp环境的搭建,在此就不在赘述.下面就简述thinkPHP如何在nginx下开启url_rewrite和pathinfo模式支持 主要有两个步骤: 一.更改php.ini将;cgi.fi ...

  5. HTML5学习预览

    HTML5中,新增了很多input元素的类型 email         email类型用于应该包含 e-mail 地址的输入域. url         url 类型用于应该包含 URL 地址的输入 ...

  6. Java同步synchronized与死锁

    多个线程要操作同一资源时就有可能出现资源的同步问题. 同步就是指多个操作在同一个时间段内只能有一个线程进行,其他线程要等待此线程完成之后才可以继续执行. 解决资源共享的同步操作,可以使用同步代码块和同 ...

  7. ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers

    阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...

  8. 在github上创建新分支

    在github上创建仓库: Create a new repository on the command line touch README.md git init git add README.md ...

  9. [Js/Jquery]table行转列

    摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适, ...

  10. zepto-selector.js简单分析

    zepto 的selector模块是对jquery扩充选择器(jquery-selector-extensions)的部分实现.比如这样的选择方法:$('div:first') 和 el.is(':v ...