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使用手册之一
Mar 24 Javascript
Js切换功能的简单方法
Nov 23 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
javascript Canvas动态粒子连线
Jan 01 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JS常用算法实现代码
2016/11/14 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python-基础-入门 简介
2014/08/09 Python
简单实现python爬虫功能
2015/12/31 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
师德师风演讲稿
2014/05/05 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
个人党性分析材料
2014/12/19 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
暑假打工感想
2015/08/07 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android