//写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. 乘风破浪：LeetCode真题_003_Longest Substring Without Repeating Characters

    乘风破浪:LeetCode真题_003_Longest Substring Without Repeating Characters 一.前言 在算法之中出现最多的就是字符串方面的问题了,关于字符串的 ...

  2. January 10 2017 Week 2nd Tuesday

    Being entirely honest with oneself is a good exercise. 对自己完全坦诚是一种很棒的锻炼. It is difficult to know deep ...

  3. ZT --- extern "C"用法详解 2010-08-21 19:14:12

    extern "C"用法详解 2010-08-21 19:14:12 分类: C/C++ 1.前言: 时常在cpp的代码之中看到这样的代码: #ifdef __cplusplus ...

  4. OC内存管理-黄金法则

    1.内存管理-黄金法则 The basic rule to apply is everything that increases the reference counter with alloc, [ ...

  5. 使用 ruamel.yaml 读写 yaml 文档

    官网链接: https://pypi.org/project/ruamel.yaml/ 1. 安装ruamel.yaml pip install ruamel.yaml 2. 准备yaml文件: Ch ...

  6. Linux命令--获取帮助

    man命令 是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息. 语法 man(选项)(参数) 选项 -a:在所有的man帮助手册中搜索: -f:等价 ...

  7. Entity Framework 指定架构无效 错误：1052

    IIS发布网站:如果不发布放到IIS没有问题,发布后IIS部署 打开网站却提示指定架构无效 1052 找到很多解决的问题 1添加wenconfig 2.更改entity名的 其实我认为最简单的就是先找 ...

  8. centos7安装docker-ce新版

    先卸载系统的旧版本yum remove docker \              docker-common \              docker-selinux \              ...

  9. 巧用DNSlog实现无回显注入

    测试一些网站的时候,一些注入都是无回显的,我们可以写脚本来进行盲注,但有些网站会ban掉我们的ip,这样我们可以通过设置ip代理池解决, 但是盲注往往效率很低,所以产生了DNSlog注入.具体原理如下 ...

  10. 随手练——USACO 1.44 母亲的牛奶

    P1215 [USACO1.4]母亲的牛奶 Mother's Milk 洛谷 P1215:https://www.luogu.org/problemnew/show/P1215 解题思想:DFS 大一 ...