jQuery中的val()示例应用


Posted in Javascript onFebruary 26, 2014

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)全不选

不弹窗口

Javascript 相关文章推荐
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
jquery live()调用不存在的解决方法
Feb 26 #Javascript
js获得参数的getParameter使用示例
Feb 26 #Javascript
父节点获取子节点的字符串示例代码
Feb 26 #Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 #Javascript
display和visibility的区别示例介绍
Feb 26 #Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 #Javascript
js返回上一页并刷新的多种实现方法
Feb 26 #Javascript
You might like
PHP数据库操作面向对象的优点
2006/10/09 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
JS input 数字验证代码
2009/07/30 Javascript
JavaScript类库D
2010/10/24 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python 可爱的大小写
2008/09/06 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
小学毕业感言300字
2014/02/19 职场文书
委托书格式
2014/08/01 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
会计做账心得体会
2016/01/22 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫