checkbox批量选中,获取选中项的值的简单实例


Posted in Javascript onJune 28, 2016

checkbox批量选中,获取选中项的值的简单实例

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="jquery.js"></script>
 </head>


 <body>
 <div id="table">
	<table id="personList" border="1">
	<tr>
	<th>ID</th>
	<th><input type="checkbox" name="allCheck" onclick="fun()"></input></th>
	<th>name</th>
	<th>age</th>
	<th>Country</th>
	</tr>
	<tr>
	<td>1</td>
	<th><input type="checkbox" name="checkme" id="a"></input></th>
	<td>asan</td>
	<td>32</td>
	<td>China</td>
	</tr>
	<tr>
	<td>2</td>
	<th><input type="checkbox" name="checkme" id="b3e"></input></th>
	<td>hon</td>
	<td>30</td>
	<td>JP</td>
	</tr>
	<tr>
	<td>3</td>
	<th><input type="checkbox" name="checkme" id="cdd"></input></th>
	<td>Jhone</td>
	<td>27</td>
	<td>USA</td>
	</tr>
	</table>
 
 </div>
 <input type="button" value="" onclick="s()" id="qw" name="aaa"/>


 <script>
	function fun(){
	var obj = document.getElementsByName("checkme");
	var arr = new Array();
	for(var i=0;i<obj.length;i++){
	obj[i].click();
	arr[i]=$(obj[i]).parent().siblings().first().text();
	alert(arr);
	}
}


function s(){
var obj = document.getElementsByName("checkme");
var arr = [];
for(var i=0;i<obj.length;i++){
if($(obj[i]).is(':checked')){
	var id = $(obj[i]).parent().siblings().first().text();
	var name = $(obj[i]).parent().siblings().eq(1).text();
	var age = $(obj[i]).parent().siblings().eq(2).text();
	var country = $(obj[i]).parent().siblings().eq(3).text();
	alert("id"+id+" ,name:"+name+" ,age:"+age+" ,country:"+country);
	//alert("$(obj[i]):"+$(obj[i])+" ,id:"+$(obj[i]).id+" ,name:"+$(obj[i]).name)
}
}
}


 </script>
 </body>
</html>

以上就是小编为大家带来的checkbox批量选中,获取选中项的值的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JQuery开发的数独游戏代码
Oct 29 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
react 生命周期实例分析
May 18 Javascript
浅谈js中的in-for循环
Jun 28 #Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 #Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 #Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 #Javascript
JavaScript事件详细讲解
Jun 27 #Javascript
JS原型链怎么理解
Jun 27 #Javascript
js选择器全面解析
Jun 27 #Javascript
You might like
smarty中js的调用方法示例
2014/10/27 PHP
php内存缓存实现方法
2015/01/24 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
工程招投标邀请书
2014/01/26 职场文书
市场营销专业求职信
2014/06/17 职场文书
经营目标管理责任书
2014/07/25 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
异地恋情人节寄语
2015/02/28 职场文书
捐书仪式主持词
2015/07/04 职场文书
2016年情人节问候语
2015/11/11 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python