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 操作下拉列表框实现代码
Feb 22 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
js日期相关函数总结分享
Oct 15 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
js正则表达式简单校验方法
Jan 03 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动态生成虚拟现实VRML网页
2006/10/09 PHP
几个学习PHP的网址
2006/11/25 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
destoon二次开发入门示例
2014/06/20 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
php实现微信支付之现金红包
2018/05/30 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
用python写asp详细讲解
2013/12/16 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python中的列表知识点汇总
2015/04/14 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python 列表理解及使用方法
2017/10/27 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
二年级数学教学反思
2014/01/21 职场文书
学生请假条格式
2014/04/11 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android