jQuery中的val()示例应用

1、实例源码


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的val()</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("input[name=ckb]:checked").each(function() {
alert($(this).val());
});
});

});
</script>
</head>

<body>
<div id="div1">
<table>
<tr>
<td>
<input type="checkbox" id="ckb1" name="ckb" value="篮球"/>篮球
<input type="checkbox" id="ckb2" name="ckb" value="足球"/>足球
<input type="checkbox" id="ckb3" name="ckb" value="排球"/>排球
</td>
</tr>
<tr>
<td>
<input type="button" id="btn" value="取值"/>
</td>
</tr>
</table>
</div>
</body>
</html>

2、结果如下

（1）选中所有的

依次弹出“篮球、足球和排球”

（2）选中部分

依次弹出相应的值

（3）全不选

不弹窗口

赞 (0)

相关推荐

  • Jquery使用val方法读写value值

    本文实例讲述了Jquery使用val方法读写value值.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • 浅析JQuery中的html(),text(),val()区别

    1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档. 2.TEXT text():取得所有匹配元素的内容.一般用id区别 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. text(val):设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<&qu

  • JQuery中的html()、text()、val()区别示例介绍

    1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档. 2.TEXT text():取得所有匹配元素的内容. 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. text(val):设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<" 和 &

  • jquery获取当前点击对象的value方法

    例:获取ul中li的value值 首先,在html中我们要为每个li设置value值 复制代码 代码如下: <ul> <li value="你好"></li> <li value="hello"></li> <li value="=-="></li> </ul> 再通过jquery根据点击事件获取对应的value 复制代码 代码如下: $(docume

  • jquery 根据name名获取元素的value值

    提问: 我要获取name属性为test的元素 但是这个test是赋值给变量的 如var name='test'; 即要获取name属性为变量name的元素 请问jquery怎么写? 答案: $("input[name="+name+"]") 问题和答案都很简单,正所谓会者不难难者不会,有相同需要的小伙伴自己来参考下吧.

  • jquery text(),val(),html()方法区别总结

    text():1.无参获取每一个匹配元素的文本内容 2.有参数 给每一个匹配元素赋值 val():1.无参获取第一个匹配元素的值 2.有参数 给每一个匹配元素赋值 html():1.无参获取第一个匹配元素的标签内容 2.有参数给每一个匹配元素赋值

  • jQuery中val()方法用法实例

    本文实例讲述了jQuery中val()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或获取匹配元素的value属性值. 只有具有value属性的元素才能够使用此方法.比如input元素可以使用此方法,而div元素就不可以. 使用方式: 用法一: 此方法不带参数的时候是返回第一个匹配元素的value属性值.例如: 复制代码 代码如下: $("input").val() 以上代码是获取第一个input元素的value属性值. 实例代码: 复制代码 代码如下: <!DOCT

  • jquery控制select的text/value值为选中状态

    每一次操作select的时候,总是要在网上翻下,太繁琐了,自己在这里总结下. 比如<select class="selector"></select> 1.设置value为"全部"的项选中 复制代码 代码如下: $(".selector").val("全部"); 2.设置text为"全部"的项选中 复制代码 代码如下: $(".selector").find(&q

  • jQuery对val和atrr("value")赋值的区别介绍

    做项目的时候,我从后台传递过来的数据给一个文本框赋值,通过google浏览器, 当修改的时候发现没有修改,最后查了下原因,原来是jQuery中val和atrr("value",对浏览器的区别, 故总结如下: jquery中的val()和atrr('value'这两个的使用,假设有默认值的情况下,如果用val()赋值了,那么当修改这个值得时候,google不能获取最新的值,但是ie可以, 针对atrr('value'如果有默认值,那么当改变这个值得时候,ie和google都能获取最新的更

  • jQuery中的val()示例应用

    1.实例源码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • jQuery中text() val()和html()的区别实例详解

    jQuery中text() val()和html()的区别实例详解

    简单的说:html()和text()的区别主要在于是否包含标签.而val()针对的是表单元素. 但是有时还是不是那么太清晰. html(),val(),text()都分为有参和无参. 举例说明它们的不同之处: html()在没有参数的情况下,取得第一个匹配元素的内容.必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素. 如: <body> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用.</p> <h3>选中下

  • jQuery中ScrollTo用法示例

    jQuery中ScrollTo用法示例

    本文实例讲述了jQuery中ScrollTo用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法.分享给大家供大家参考,具体如下: 主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> </head> <body> <div id="one">aa</div> </body> <script typ

  • jquery中each方法示例和常用选择器

    <head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.

  • jquery中val()方法是从最后一个选项往前读取的

    在jquery中,val()方法是从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会被选中 <select id="single"> <option>选择1号</option> <option>选择2号</option> <option value="选择2号">选择3号</option> </select> $("input:eq(0)

  • 详谈jQuery中使用attr(), prop(), val()获取value的异同

    jQuery中有3个获取元素value值的函数比较相似:attr(), prop(), val():拿来比较一下. 示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-2.1.4.js"></scrip

  • jQuery中Find选择器用法示例

    本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va

  • Jquery中val()表单取值赋值的实例代码

    jQuery提供了强大的val()方法来处理value相关操作.获得单个select的值和多选select的值. 复制代码 代码如下: HTML 代码:<p></p><br/><select id="single">  <option>Single</option>  <option>Single2</option></select><select id="mul

随机推荐