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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
google地图的路线实现代码
Aug 20 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
详解JavaScript函数
Dec 01 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
基于vue.js实现购物车
Jan 15 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
浅谈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
PHP 模板高级篇总结
2006/12/21 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php图像验证码生成代码
2017/06/08 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
了解重排与重绘
2019/05/29 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
Python的两道面试题
2013/06/29 面试题
酒店实习个人鉴定
2013/12/07 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
公司开业致辞
2015/07/29 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers