//写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. Excel课程表

  2. 今天调试一个open有个小启发

    从别处抄来一个代码 mode是:O_WRONLY 以只写方式打开文件 而实际上我用的是read操作,所以老是读出-1 检查了很久才发现是这个错误:O_WRONLY 以只写方式打开文件 -> O_ ...

  3. BZOJ2208:[JSOI2010]连通数(DFS)

    Description Input 输入数据第一行是图顶点的数量,一个正整数N. 接下来N行,每行N个字符.第i行第j列的1表示顶点i到j有边,0则表示无边. Output 输出一行一个整数,表示该图 ...

  4. HTML 5中的文件处理之FileAPI

    在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是js最擅 长的处理之一.但文件处理,尤其是二进制文件处理,一直是个空白.在一些情况下,我们不得不通过Fla ...

  5. inux下使用自带mail发送邮件告警

    安装mailx工具,mailx是一个小型的邮件发送程序. 具体步骤如下: 1.安装 [root@localhost ~]# yum -y install mailx 2.编辑配置文件 [root@lo ...

  6. JDK（二）JDK1.8源码分析【排序】timsort

    如无特殊说明,文中的代码均是JDK 1.8版本. 在JDK集合框架中描述过,JDK存储一组Object的集合框架是Collection.而针对Collection框架的一组操作集合体是Collecti ...

  7. Android性能测试之Monkey使用

    内容中包含 base64string 图片造成字符过多,拒绝显示

  8. 404 Note Found 队-Alpha5

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  9. ASP.NET Core 中的 WebSocket 支持（转自MSDN）

    本文介绍 ASP.NET Core 中 WebSocket 的入门方法. WebSocket (RFC 6455) 是一个协议,支持通过 TCP 连接建立持久的双向信道. 它用于从快速实时通信中获益的 ...

  10. sharepoint 搜索报错

    配置sharepoint 拓扑架构,将两台服务器一起来爬网. 配置如下: $hostA = Get-SPEnterpriseSearchServiceInstance -Identity " ...