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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
vue-loader教程介绍
Jun 14 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
JS实现拼图游戏
Jan 29 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
JavaScript中的几种继承方法示例
Dec 06 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和ACCESS写聊天室(八)
2006/10/09 PHP
php学习 函数 课件
2008/06/15 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
js 提交和设置表单的值
2008/12/19 Javascript
img标签中onerror用法
2009/08/13 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
Apache如何部署django项目
2017/05/21 Python
numpy自动生成数组详解
2017/12/15 Python
python实现图片压缩代码实例
2019/08/12 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Pygame的程序开始示例代码
2020/05/07 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
中层干部岗位职责
2013/12/18 职场文书
社会调查研究计划书
2014/05/01 职场文书
影视广告专业求职信
2014/09/02 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS