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 相关文章推荐
原生js写的放大镜效果
Aug 22 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
DWR中各种java方法的调用
May 04 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
Vue组件简易模拟实现购物车
Dec 21 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 文件夹删除、php清除缓存程序
2009/08/25 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
总结对比php中的多种序列化
2016/08/28 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
理论讲解python多进程并发编程
2018/02/09 Python
wxPython的安装与使用教程
2018/08/31 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Python实现石头剪刀布游戏
2021/01/20 Python
python实现学生信息管理系统源码
2021/02/22 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
学院领导推荐信
2013/10/30 职场文书
会计岗位职责
2013/11/08 职场文书
大一军训感言
2014/01/09 职场文书
阿德的梦教学反思
2014/02/06 职场文书
《假如》教学反思
2014/04/17 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
学术会议领导致辞
2015/07/29 职场文书