//写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. poj3718 Facer's Chocolate Dream

    题目链接 正解:组合数+$dp$. 今天考试的题,考试的时候感觉自己有点脑残过头了.. 似乎发现了所有$1$其实都是一样的,然后不知道怎么强制每种物品只选一个.. 然后就写了一个所有物品可以选任意个的 ...

  2. Django 发送html邮件

    转载于: http://blog.sina.com.cn/s/blog_76e94d2101011bxd.html   django中发送html邮件:   #mailer.py   # -*- co ...

  3. Requests中文乱码解决方案

    分析: r = requests.get(“http://www.baidu.com“) **r.text返回的是Unicode型的数据. 使用r.content返回的是bytes型的数据. 也就是说 ...

  4. 1067. [SCOI2007]降雨量【线段树】

    Description 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意 Y<Z<X,Z年的降雨量严格小于X年.例如2002,2003, ...

  5. C/C++——老夫记不住

    常指针 Coordinate * const pCoor=&coor1; 指针所指向的地址不可改变. 常对象指针 const Coordinate *pCoor=&coor1; 所指对 ...

  6. [19/04/28-星期日] GOF23_结构型模式(享元模式)

    一.享元模式(FlyWeight,轻量级) [共享类与非共享类] /*** *FlyweightFactory享元工厂类: 创建并管理享元对象,享元池一般设计成键值对 */ package cn.sx ...

  7. indexzero/http-server-2-使用

    所以在ethereumjs-vm/examples/run-transactions-simple例子中要怎么使用http-server 1.首先在ethereumjs-vm/examples/run ...

  8. Git创建本地分支并关联远程分支

    创建本地分支git branch 分支名 例如:git branch dev,这条命令是基于当前分支创建的本地分支,假设当前分支是master(远程分支),则是基于master分支创建的本地分支dev ...

  9. 解决java log4j 配置log4jCaused by: java.lang.ClassNotFoundException: org.apache.logging.log4j.LogManager

    前提安装http://mirror.bit.edu.cn/apache/logging/log4j/2.11.2/apache-log4j-2.11.2-bin.zip Buildpath 配置add ...

  10. 阿里云阿里免费ssl wap网站在手机微信、手机浏览器无法访问

    图片可以访问,样式无法显示 https://css.cnbuses.com/css/wap/gonggong.css 1,怀疑是开了代理访问. 关闭后还是访问空白. 2.在手机浏览器打开,提示该网站的 ...