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实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
如何实现js拖拽效果及原理解析
May 08 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
yii数据库的查询方法
2015/12/28 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue mounted组件的使用
2018/06/18 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python 实时遍历日志文件
2016/04/12 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
人事主管岗位职责
2014/01/30 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
优质服务活动实施方案
2014/05/02 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
创先争优演讲稿
2014/09/15 职场文书
员工保密协议书
2014/09/27 职场文书
2014年班务工作总结
2014/12/02 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
关于python中模块和重载的问题
2021/11/02 Python