编程 Javascript

jQuery实现复选框全选/取消全选/反选及获得选择的值

Posted in Javascript onJune 12, 2014

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
// 全选/取消全部 
$("#checkAllChange").click(function() { 
if (this.checked == true) { 
$(".userid").each(function() { 
this.checked = true; 
}); 
} else { 
$(".userid").each(function() { 
this.checked = false; 
}); 
} 
}); 
// 全选 
$("#checkAll").click(function() { 
$(".userid").each(function() { 
this.checked = true; 
}); 
}); 
// 取消全部 
$("#removeAll").click(function() { 
$(".userid").each(function() { 
this.checked = false; 
}); 
}); 
// 反选 
$("#reverse").click(function() { 
$(".userid").each(function() { 
if (this.checked == true) { 
this.checked = false; 
} else { 
this.checked = true; 
} 
}) 
}); 
//批量删除 
$("#delAll").click(function() { 
var arrUserid = new Array(); 
$(".userid").each(function(i) { 
if (this.checked == true) { 
arrUserid[i] = $(this).val(); 
} 
}); 
alert("批量删除的:" + arrUserid); 
}); 
}); 
</script> 
</head> <body> 
<table border="1"> 
<tr> 
<td><input type="checkbox" id="checkAllChange" /></td> 
<td>用户id</td> 
<td>用户名</td> 
<td>电话</td> 
<td>地址</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="1" /></td> 
<td>1</td> 
<td>wangzs1</td> 
<td>18888000</td> 
<td>浦东</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="2" /></td> 
<td>2</td> 
<td>wangzs2</td> 
<td>18888001</td> 
<td>上海</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="3" /></td> 
<td>3</td> 
<td>wangzs3</td> 
<td>18888002</td> 
<td>河南</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="4" /></td> 
<td>4</td> 
<td>wangzs4</td> 
<td>18888003</td> 
<td>许昌</td> 
</tr> 
<tr> 
<td></td> 
<td><input type="button" id="checkAll" value="全选" /></td> 
<td><input type="button" id="removeAll" value="取消全部" /></td> 
<td><input type="button" id="reverse" value="反选" /></td> 
</tr> 
<tr> 
<td colspan="4" align="center"><input type="button" value="批量删除" id="delAll"></td> 
</tr> 
</table> 
</body> 
</html>

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery教程限制文本框只能输入数字和小数点示例分享

Jan 13 Javascript

JavaScript中实现无缝滚动、分享到侧边栏实例代码

Apr 06 Javascript

Vue.js第三天学习笔记（计算属性computed）

Dec 01 Javascript

canvas实现图像放大镜

Feb 06 Javascript

React应用中使用Bootstrap的方法

Aug 15 Javascript

Bootstrap 3多级下拉菜单实例

Nov 23 Javascript

jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法

Dec 05 jQuery

JavaScript中import用法总结

Jan 20 Javascript

JS pushlet XMLAdapter适配器用法案例解析

Oct 16 Javascript

vue+flask实现视频合成功能(拖拽上传)

Mar 04 Vue.js

JavaScript 对象创建的3种方法

Nov 17 Javascript

JS前端使用Canvas快速实现手势解锁特效

Sep 23 Javascript

深入理解javascript中的立即执行函数(function(){…})()

Jun 12 #Javascript

Javascript封装DOMContentLoaded事件实例

Jun 12 #Javascript

自己封装的javascript事件队列函数版

Jun 12 #Javascript

jquery动态添加删除一行数据示例

Jun 12 #Javascript

checkbox勾选判断代码分析

Jun 11 #Javascript

百度判断手机终端并自动跳转js代码及使用实例

Jun 11 #Javascript

js获取日期：昨天今天和明天、后天

Jun 11 #Javascript