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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
js异常捕获方法介绍
Apr 10 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 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
一个简单的PHP投票程序源码
2007/03/11 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python输出带颜色的字符串实例
2017/10/10 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python 函数中的参数类型
2020/02/11 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
班组长安全职责
2014/01/05 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
学生病假条怎么写
2015/08/17 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis