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 UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
swiper实现导航滚动效果
Dec 13 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对文件进行加锁、解锁实例
2015/01/23 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
月度优秀员工获奖感言
2014/08/16 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
经理岗位职责范本
2015/04/15 职场文书
毕业设计致谢语
2015/05/14 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android