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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
详解Vue中的watch和computed
Nov 09 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 Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP面向对象精要总结
2014/11/07 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
分享vim python缩进等一些配置
2018/07/02 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python对常见数据类型的遍历解析
2019/08/27 Python
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
车间安全生产标语
2014/06/06 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
毕业证委托书范文
2014/09/26 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
暑期家教宣传单
2015/07/14 职场文书