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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
详解webpack的clean-webpack-plugin插件报错
Oct 16 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
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
上班迟到检讨书
2014/01/10 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
小学教师岗位职责
2015/04/02 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS