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 相关文章推荐
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python的时间模块datetime详解
2017/04/17 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
美国性感女装网站:bebe
2017/03/04 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
会计自荐信范文
2014/03/09 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
债务追讨律师函
2015/06/24 职场文书
《所见》教学反思
2016/02/23 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers