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 面向对象全新理练之原型继承
Dec 03 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
vue实现弹幕功能
Oct 25 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 如何获取二维数组中某个key的集合
2014/06/03 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
python实现360的字符显示界面
2014/02/21 Python
python中__call__方法示例分析
2014/10/11 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL