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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 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扩展图文教程
2008/12/12 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
javascript add event remove event
2008/04/07 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python-for循环的内部机制
2020/06/12 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
应届生煤化工求职信
2013/10/21 职场文书
什么是岗位职责
2013/11/12 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
安全生产承诺书范文
2014/05/22 职场文书
美术教师求职信范文
2015/03/20 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle