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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
axios post提交formdata的实例
Mar 16 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
Ajax常用封装库——Axios的使用
May 08 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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 获取可变函数参数的函数
2009/08/26 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
PHP防盗链代码实例
2014/08/27 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
React中使用UMEditor的方法示例
2019/12/27 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Python求导数的方法
2015/05/09 Python
python目录与文件名操作例子
2016/08/28 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python 实现list或string按指定分段
2019/12/25 Python
python3 实现调用串口功能
2019/12/26 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python爬虫开发与项目实战
2020/12/16 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
大学生会计职业生涯规划范文
2014/02/28 职场文书
成绩单公证书
2014/04/10 职场文书
作文评语大全
2014/04/23 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
辞职信格式范文
2015/05/13 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers