//写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. iStat Menus 的激活密

    Email: @qq.com SN: GAWAE-FCWQ3-P8NYB-C7GF7-NEDRT-Q5DTB-MFZG6-6NEQC-CRMUD-8MZ2K-66SRB-SU8EW-EDLZ9-TGH ...

  2. C语言顺序表的实现

    今天本来想写段代码练练手,想法挺好结果,栽了个大跟头,在这个错误上徘徊了4个小时才解决,现在分享出来,给大家提个醒,先贴上代码: /********************************** ...

  3. iOS动画的逻辑结构：动画的定义--动画是采用连续播放静止图像的方法产生物体运动的效果。

    动画的定义:视图+时间+空间+速度 视图信息的时空变换: 视图组的按时间逐帧展示: Core Animation 类的继承关系图 各类常用属性 CAMediaTiming:CALayer和Core A ...

  4. java开发优化常用的快捷键

    快速打印的输出语句:输入syso,然后按alt+/,即可 快速删除一行:ctrl+D 让代码块缩进:选中要缩进的代码,然后按tab键 让代码块退格:选中要退格的代码,然后按shift+tab键 格式化 ...

  5. Java工具类(util) 之01- 数学运算工具(精确运算)

    数学运算工具(精确运算) /** * * @author maple * */ public abstract class AmountUtil { private AmountUtil() { } ...

  6. SQL进价2：三值逻辑和null

    1.SQL中的bool类型的值有三种 普通编程语言里的布尔型只有 true 和 false 两个值,这种逻辑体系被称为二值逻辑.而 SQL 语言里,除此之外还有第三个值 unknown,因此这种逻辑体 ...

  7. 【bbs】index、post

    列表 奇数行和偶数行设置不同的背景 http://blog.csdn.net/facecrazy/article/details/51252850 实现ul li中的内容上下左右居中,不用设置li宽度 ...

  8. 【JavaScript】颜色选择器

    颜色空间RGB与HSV(HSL)的转换 好文推荐:http://blog.csdn.net/jiangxinyu/article/details/8000999 从 HSV 到 RGB 的转换 类似的 ...

  9. Kali-linux使用NVIDIA计算机统一设备架构（CUDA）

    CUDA(Compute Unified Device Architecture)是一种由NVIDIA推出的通用并行计算架构,该架构使用GPU能够解决复杂的计算问题.它包含了CUDA指令集架构(ISA ...

  10. 配置mysql允许远程链接

    默认情况下,mysql帐号不允许从远程登陆,只能在localhost登录.本文提供了二种方法设置mysql可以通过远程主机进行连接. 修改用户表的数据 登入mysql后,更改 mysql 数据库里的 ...