`
jd406
  • 浏览: 48441 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

js实现反选和全选

    博客分类:
  • js
阅读更多
首先定义一个可以进行全选和反选的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关键字
}


3
0
分享到:
评论
5 楼 jd406 2012-01-08  
idealwangqing 写道
idealwangqing 写道
/*全选*/
for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=obj.checked;                           
}
/*反选*/

for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=!(obj.checked);                           
}



/*反选*/

for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=!(boxs[i].checked);                           
}

嗯,这里我上面写错了,我写的是全选和取消全选,下面这个才是正确的。
4 楼 idealwangqing 2012-01-07  
idealwangqing 写道
/*全选*/
for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=obj.checked;                           
}
/*反选*/

for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=!(obj.checked);                           
}



/*反选*/

for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=!(boxs[i].checked);                           
}
3 楼 idealwangqing 2012-01-06  
/*全选*/
for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=obj.checked;                           
}
/*反选*/

for(var i=0; i<boxs.length; i++) { 
    boxs[i].checked=!(obj.checked);                           
}
2 楼 jd406 2012-01-06  
zhenglongfei 写道
反选和全选只需要设置checked值为true false 就行了,这么多代码,新手容易看不懂

反选和全选只需要上面前两个方法就行了,后面的是拓展的,因为用得比较多。
1 楼 zhenglongfei 2012-01-06  
反选和全选只需要设置checked值为true false 就行了,这么多代码,新手容易看不懂

相关推荐

    JS实现全选反选全不选

    JS实现全选反选全不选

    JS实现全选、反选

    JS JS实现全选反选 全选 反选

    三种方式实现checkbox全选,反选

    以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的...

    Javascript实现全选反选

    在JavaScript编程中,"全选反选"功能...二、JavaScript实现全选/反选 1. HTML结构: 首先,我们需要在HTML中设置一个主复选框(全选)和多个子复选框: ```html &lt;input type="checkbox" id="selectAll"&gt; 全选 ...

    JS实现checkbox的全选和反选

    资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    js实现全选和反选功能

    在JavaScript中,全选和反选...总的来说,通过JavaScript实现全选和反选功能并不复杂,关键在于正确地获取和操作复选框的`checked`属性。了解这些基础知识后,你可以灵活地应用在各种Web项目中,提高用户的交互体验。

    简单js实现全选全部选反选效果

    以上就是使用JavaScript实现全选和反选功能的基本方法。在实际应用中,可能还需要考虑更多细节,如处理异步加载的数据、兼容不同浏览器等。通过不断学习和实践,你可以熟练掌握这些技巧,提高网页的交互性和用户体验...

    jquery实现全选和反选小功能

    很好用的使用jquery来实现的通用的全选反选功能

    JS简单表格列表全选反选代码.zip

    本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能,它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用,例如在用户需要批量操作表格项时。 1. **...

    jquery全选反选全不选案例

    以上就是一个基本的 jQuery 全选、反选功能的实现。为了实现全不选,只需要在用户点击 "全选" 复选框时,将其状态设置为未选中即可。 这个案例展示了 jQuery 如何通过事件监听和 DOM 操作来增强用户体验。在实际...

    checkbox实现全选和反选经典例子

    在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

    简单实现全选反选功能(html)

    在网页开发中,全选和反选功能是常见的交互元素,尤其在表格或者多选项列表中,用户可能希望一键选择所有项目或清除已选。在这个案例中,我们将探讨如何使用HTML和jQuery来实现这一功能。 首先,我们需要创建HTML...

    Jquery实现全选和反选功能

    本教程将深入探讨如何使用jQuery实现全选和反选功能,这在多选列表或表格中非常常见,例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框(通常标记为“全选”)...

    js实现全选与反选

    主要适用于全选和反选 共两个按钮一个全选和反选 全选可以实现点击全选后全部被(选中) 再点击全选的时候 就被(取消)了。 当然反选就不用说了 此代码功能很实用·····

    原生JS 实现简单的全选反选.html

    实现table表格checkbox复选框的全选 反选, 适用于原生table。

    js书写全选反选

    用js书写全选反选的事例,简单明了,源代码,方便易学,可直接引用

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    js实现全选和反选

    通过js代码,实现表单元素的全选和反选的简单的例子

    js 全选/反选/删除选择等代码 (精华)

    总结来说,全选、反选和删除选择是JavaScript中常见的交互功能,通过遍历和操作DOM中的元素,可以实现这些功能,提升用户的操作效率。在实际开发中,这些功能通常结合HTML和CSS一起使用,以提供完整的用户界面和交互...

Global site tag (gtag.js) - Google Analytics