首先定义一个可以进行全选和反选的checkbox:
<input type="checkbox" name="all" id="all" onclick="checkAll(this)" />
当然,下面会有很多的checkbox需要进行操作,采用下面的方式:
<input type="checkbox" name="indexed" id="indexed${taskId}" value="${taskId}" />
正如你若看到的,它们的name属性是一样的。
写几个js方法进行操作:
/***** 全选和反选 *****/
function checkAll(obj) {
var boxs = document.getElementsByName('indexed');
if(obj.checked) {
for(var i=0; i<boxs.length; i++) {
boxs[i].checked=true;
}
}else {
for(var i=0; i<boxs.length; i++) {
boxs[i].checked=false;
}
}
}
/** 检查是否选择了记录 **/
function checkSelected(){
var obj = document.getElementsByName('indexed');
var checked = false;
for(var i =0;i<obj.length;i++){
if(obj[i].checked){
checked=true;
break;
}
}
if (!checked){
return false;
}
return true;
}
/** 单条删除 **/
function delete_single(id){
//点击后面的删除链接,将前面的复选框勾选上
var ocheckbox = document.getElementsByName('indexed');
for(var i =0;i<ocheckbox.length;i++){
if(ocheckbox[i].value==id){
ocheckbox[i].checked = true;
break;
}
}
deleteTask();
}
/***** 批量删除 *****/
function deleteTask(){
var element=document.getElementsByName("indexed");
var ids="";
for(var i=0;i<element.length;i++){
if(element[i].checked==true){
ids+="'"+ element[i].value +"',";
}
}
if(!checkSelected())
{
alert('您未选择任何记录!');
} else {
ids=ids.slice(0,ids.lastIndexOf(","));
}
//ids的最终格式:'1','2','3'
//这样在进行数据库的批量操作时,可以直接用in关键字
}
分享到:
相关推荐
JS实现全选反选全不选
JS JS实现全选反选 全选 反选
以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的...
在JavaScript编程中,"全选反选"功能...二、JavaScript实现全选/反选 1. HTML结构: 首先,我们需要在HTML中设置一个主复选框(全选)和多个子复选框: ```html <input type="checkbox" id="selectAll"> 全选 ...
资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
在JavaScript中,全选和反选...总的来说,通过JavaScript实现全选和反选功能并不复杂,关键在于正确地获取和操作复选框的`checked`属性。了解这些基础知识后,你可以灵活地应用在各种Web项目中,提高用户的交互体验。
以上就是使用JavaScript实现全选和反选功能的基本方法。在实际应用中,可能还需要考虑更多细节,如处理异步加载的数据、兼容不同浏览器等。通过不断学习和实践,你可以熟练掌握这些技巧,提高网页的交互性和用户体验...
很好用的使用jquery来实现的通用的全选反选功能
本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能,它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用,例如在用户需要批量操作表格项时。 1. **...
以上就是一个基本的 jQuery 全选、反选功能的实现。为了实现全不选,只需要在用户点击 "全选" 复选框时,将其状态设置为未选中即可。 这个案例展示了 jQuery 如何通过事件监听和 DOM 操作来增强用户体验。在实际...
在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...
在网页开发中,全选和反选功能是常见的交互元素,尤其在表格或者多选项列表中,用户可能希望一键选择所有项目或清除已选。在这个案例中,我们将探讨如何使用HTML和jQuery来实现这一功能。 首先,我们需要创建HTML...
本教程将深入探讨如何使用jQuery实现全选和反选功能,这在多选列表或表格中非常常见,例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框(通常标记为“全选”)...
主要适用于全选和反选 共两个按钮一个全选和反选 全选可以实现点击全选后全部被(选中) 再点击全选的时候 就被(取消)了。 当然反选就不用说了 此代码功能很实用·····
实现table表格checkbox复选框的全选 反选, 适用于原生table。
用js书写全选反选的事例,简单明了,源代码,方便易学,可直接引用
### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
通过js代码,实现表单元素的全选和反选的简单的例子
总结来说,全选、反选和删除选择是JavaScript中常见的交互功能,通过遍历和操作DOM中的元素,可以实现这些功能,提升用户的操作效率。在实际开发中,这些功能通常结合HTML和CSS一起使用,以提供完整的用户界面和交互...