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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 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实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
浅析Prototype的模板类 Template
2011/12/07 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
pandas中Timestamp类用法详解
2017/12/11 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
详解python logging日志传输
2020/07/01 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
Python项目打包成二进制的方法
2020/12/30 Python
python regex库实例用法总结
2021/01/03 Python
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
工程师岗位职责
2013/11/08 职场文书
公司担保书范文
2014/05/21 职场文书
课外访万家心得体会
2014/09/03 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
项目建议书
2015/02/04 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS