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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
javascript回到顶部特效
Jul 30 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Html5生成验证码的示例代码
May 10 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
解析php中memcache的应用
2013/06/18 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
js同时按下两个方向键
2007/12/01 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
js实现小星星游戏
2020/03/23 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
django url到views参数传递的实例
2019/07/19 Python
python yield关键词案例测试
2019/10/15 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python如何实现邮件功能
2020/05/27 Python
Python中Selenium模块的使用详解
2020/10/09 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
财务经理岗位职责
2013/11/09 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript