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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
vue 动态表单开发方法案例详解
Dec 02 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
jQuery Mobile 导航栏代码
2013/11/01 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
解决Python对齐文本字符串问题
2019/08/28 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
青蓝工程实施方案
2014/03/27 职场文书
会计求职自荐信
2014/06/20 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
公务员个人年终总结
2015/02/12 职场文书