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 RadioButtonList获取选中值
Apr 09 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
Vue基本指令实例图文讲解
Feb 25 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php 可变函数使用小结
2018/06/12 PHP
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
关于Function中的bind()示例详解
2016/12/02 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
js+css实现打字效果
2020/06/24 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
基于Python os模块常用命令介绍
2017/11/03 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
房务中心文员岗位职责
2014/04/16 职场文书
药店促销活动策划方案
2014/08/24 职场文书
公司承诺函范文
2015/01/21 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
思想工作总结范文
2015/08/12 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
Mysql 文件配置解析介绍
2022/05/06 MySQL