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 写类方式之八
Jul 05 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jquery 图片轮换效果
Jul 29 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
Vue3 Composition API的使用简介
Mar 29 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添加MySQL数据记录代码
2008/06/07 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Python输出带颜色的字符串实例
2017/10/10 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
公司市场部岗位职责
2013/12/02 职场文书
品质主管的岗位职责
2013/12/04 职场文书
采购部部门职责
2013/12/15 职场文书
六年级数学教学反思
2014/02/03 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
爬山的活动方案
2014/08/16 职场文书
异地年检委托书范本
2014/09/24 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书