//写jQuery代码时注意前面一定要记得加$(function(){});，在文档加载完成后进行代码的编写

　　使用jQuery的表单对象属性来选择被选中的项：:checked，详见文档选择器部分

　　根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

一、单选框radio

　　1.获取被选中的单选框的value：

var item = $("input[name=hobby][checked]").val();

　//设置则为带参的方法

　　　基础代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试表单数据值的操作</title>

    <script src="bootstrap\js\jquery.min.js"> </script>

</head>

<body>

    <form action="#">

        <input type="button" id="btn" value="开始测试"><br/>

        <input type="radio" name="hobby" value="eat" />吃饭<br/>

        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>

    </form>

<script type="text/javascript">

    //必须等待文档加载完进行操作！

    $(function(){

        $("#btn").click(function(){

            var item = $("input[name=hobby][checked]").val();

            alert(item);

        });

    });

</script>

</body>

</html>

　　

　　　2.设置拥有指定value值为选中

$("input[type=radio]").attr("checked",'eat');

　　　　此方式相对直观：

$("input[name=hobby][value=eat]").attr("checked",true);

二、下拉框select

　　1.获取被选中的option的value值

var item = $("select[name=ball] option[selected]").val();

　　　获取里面的文本值：

var item = $("select[name=ball] option[selected]").text();

　　基础代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试表单数据值的操作</title>

    <script src="bootstrap\js\jquery.min.js"> </script>

</head>

<body>

    <form action="#">

        <!--单选框-->

        <input type="button" id="btn" value="开始测试"><br/>

        <input type="radio" name="hobby" value="eat"/>吃饭<br/>

        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>

        <!--下拉框-->

        <select name="ball">

            <option value="pingpang">乒乓球</option>

            <option value="basketball">篮球</option>

            <option value="baseball" selected>排球</option>

        </select>

    </form>

<script type="text/javascript">

    //必须等待文档加载完进行操作！

    $(function(){

        $("#btn").click(function(){

            /*1.var item = $("input[name=hobby][checked]").val();

            alert(item);

            /*2.$("input[type=radio]").attr("checked",'eat');*/

            /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/

            var item = $("select[name=ball] option[selected]").text();

            alert(item)

        });

    });

</script>

</body>

</html>

　　2.设置指定value值选中

$("select[name=ball]").val("pingpang");

 三、输入框（文本框、文本域）

　　1.获取文本框、文本域中的值

var item = $("#username").val();

　　基础代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试表单数据值的操作</title>

    <script src="bootstrap\js\jquery.min.js"> </script>

</head>

<body>

    <form action="#">

        <!--单选框-->

        <input type="button" id="btn" value="开始测试"><br/>

        <input type="radio" name="hobby" value="eat"/>吃饭<br/>

        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>

        <!--下拉框-->

        <select name="ball">

            <option value="pingpang">乒乓球</option>

            <option value="basketball">篮球</option>

            <option value="baseball" selected>排球</option>

        </select>

        <br/>

        <!--普通文本框-->

        用户名：<input type="text" name="username" id="username"/>

    </form>

<script type="text/javascript">

    //必须等待文档加载完进行操作！

    $(function(){

        $("#btn").click(function(){

            /*1.var item = $("input[name=hobby][checked]").val();

            alert(item);

            /*2.$("input[type=radio]").attr("checked",'eat');*/

            /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/

            /*var item = $("select[name=ball] option[selected]").val();

            alert(item)*/

            /*$("select[name=ball]").val("pingpang");*/

            /*$("select[name=ball] option[text='篮球']").attr("selected",true);*/

            var item = $("#username").val();

            alert(item);

        });

    });

</script>

</body>

</html>

　　2.设置文本框、文本域中的值

$("#username").val("777");

 四、复选框checkbox

　　1.设置指定value值的复选框被选中:可以使用prop()，见页首

$("input[name=fruit][value=apple]").attr("checked",true);

//类似单选框

　　　　可以同时使得多个被选中

$("input[name=fruit]").attr("checked",true);

　　基础代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试表单数据值的操作</title>

    <script src="bootstrap\js\jquery.min.js"> </script>

</head>

<body>

    <form action="#">

        <!--单选框-->

        <input type="button" id="btn" value="开始测试"><br/>

        <input type="radio" name="hobby" value="eat"/>吃饭<br/>

        <input type="radio" name="hobby" value="sleep" checked/>睡觉<br/>

        <!--下拉框-->

        <select name="ball">

            <option value="pingpang">乒乓球</option>

            <option value="basketball">篮球</option>

            <option value="baseball" selected>排球</option>

        </select>

        <br/>

        <!--普通文本框-->

        用户名：<input type="text" name="username" id="username" /><br>

        <!--复选框-->

        <input type="checkbox" name="fruit" value="apple">苹果

        <input type="checkbox" name="fruit" value="banana">香蕉

        <input type="checkbox" name="fruit" value="orange">橘子

    </form>

<script type="text/javascript">

    //必须等待文档加载完进行操作！

    $(function(){

        $("#btn").click(function(){

            /*1.var item = $("input[name=hobby][checked]").val();

            alert(item);

            /*2.$("input[type=radio]").attr("checked",'eat');*/

            /*3.$("input[name=hobby][value=eat]").attr("checked",true);*/

            /*var item = $("select[name=ball] option[selected]").val();

            alert(item)*/

            /*$("select[name=ball]").val("pingpang");*/

            /*$("select[name=ball] option[text='篮球']").attr("selected",true);*/

            /*var item = $("#username").val();

            alert(item);*/

            /*$("#username").val("777");*/

            $("input[name=fruit]").attr("checked",true);

        });

    });

</script>

</body>

</html>

　　2.获取被选中的复选框的长度

var l = $("input[name=fruit]:checked").length;

　　3.遍历被选中的checkbox的值

$("input[name=fruit]:checked").each(function(){

                alert(this.value);

            });

　　当然，也可以包装为jQuery对象的写法：

$("input[name=fruit]:checked").each(function(){

                alert($(this).val());

            });

　　全选与全不选

$("#btn1").click(function(){

$("input[name='checkbox']").attr("checked","true");

})

　　

$("#btn2").click(function(){

$("input[name='checkbox']").removeAttr("checked");

})

 　　全选框控制一组复选框全选全不选状态：

    //全选框的单击事件：

        $("#check_all").click(function(){

            //直接使用attr()时是undefined，因为我们定义的时候没有定义，我们使用prop()

            //$(this).prop("checked");

            //下面的单个的框的值就是全选的状态的值

            $(".check_item").prop("checked",$(this).prop("checked"));

        });

　　未选满时，全选框未选中

//为后来动态生成的check_item绑定单击事件

        $(document).on("click",".check_item",function(){

            //若当前选中的元素为5个全选，则全选按钮选中

                //当然，这里不能写死，如果将来变为6个7个还需改动

            var flag = $(".check_item:checked").length == $(".check_item").length;

                $("#check_all").prop("checked",flag);

        });

//补充：重置表单：$('#yigeform')[0].reset()

JQuery补充——获取与设置表单值的更多相关文章

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

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

  2. js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

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

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

  4. JavaScript（19）jQuery HTML 获取和设置内容和属性

    jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强慷慨法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 D ...

  5. jQuery -&gt; 获取／设置／删除DOM元素的属性

    jQuery的属性操作很easy,以下以一个a元素来说明属性的获取/设置/删除操作 <body> <a>jquery.com</a> </body> 加 ...

  6. jquery获取和设置表单数据

    1.需求 正好做到设置和获取表单数据的功能,做个整理 2.计划安排 3.计划实施 1.获取值 <!--1获取普通文本框的值--> <input type="text&quo ...

  7. jquery批量提交表单值 和批量设置表单值

    $('#frmCustomerConfirmCar').find('[name]').each(function () { var type = $(this)[0].nodeName.toLower ...

  8. js jquery, jquery-ui 获取form各种表单input的值?

    如何获取? make up (for): 弥补, 补偿, her beaty cannot make up for her stu'pidity. five Basic laws of human s ...

  9. jQuery学习- 获取与设置属性的函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 附加进程找不到w3wp.exe进程解决方案

    在进程列表的下面,有个show processes in all sessions(显示所有用户的进程(U)),把它勾上就能看到了 ,就是这么简单.

  2. ZT fcntl设置FD_CLOEXEC标志作用

    fcntl设置FD_CLOEXEC标志作用 分类: C/C++ linux 2011-11-02 22:11 3217人阅读 评论(0) 收藏 举报 bufferexegccnullfile 通过fc ...

  3. java查找字符串里与指定字符串相同的个数

    public class EmployeeDemo { //方法一: public int search(String str,String strRes) {//查找字符串里与指定字符串相同的个数 ...

  4. BZOJ1485:[HNOI2009]有趣的数列(卡特兰数)

    Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<…&l ...

  5. Python中的类（一）

    Python中的类(一) 一. 应用场景 如果多个函数中有一些相同的参数时,转换成面向对象. 二. 如何创建类 类是用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法 ...

  6. map详解<一>

    首先了解下pair工具类: 这个类在头文件<utility>,功能:将俩个类型可能不一样的值组合在一起.,通过first和second来访问这两个值.还定义了operator == 和op ...

  7. 理解java的三大特性之多态

    所谓多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指向哪个类的实例对象,该引用变量发出的方法调用到底是哪个 ...

  8. nRF5 SDK for Mesh(二) Getting started 快速开始

    Getting started To get started, take a look at the Light switch demo. It shows how a simple applicat ...

  9. SpringBoot 动态打包

    配置pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  10. Xcode缓存数据清除

    1. 移除 APP 打包的ipa历史版本(Archives) 不可恢复,就是你打的包,如果需要dysm文件,及时备份 路径:~/Library/Developer/Xcode/Archives 2. ...