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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
Element Dialog对话框的使用示例
Jul 26 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
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
JQuery 入门实例1
2009/06/25 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JavaScript手机振动API
2016/06/11 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现备份目录的方法
2015/08/03 Python
Python heapq使用详解及实例代码
2017/01/25 Python
Python探索之ModelForm代码详解
2017/10/26 Python
Python OS模块实例详解
2019/04/15 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
班组长竞聘书
2014/03/31 职场文书
英语系本科生求职信
2014/07/15 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python