当前位置: 代码迷 >> JavaScript >> js兑现反选和全选
  详细解决方案

js兑现反选和全选

热度:87   发布时间:2012-09-01 09:33:02.0
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关键字
}


1 楼 zhenglongfei 2012-01-06  
反选和全选只需要设置checked值为true false 就行了,这么多代码,新手容易看不懂
2 楼 jd406 2012-01-06  
zhenglongfei 写道
反选和全选只需要设置checked值为true false 就行了,这么多代码,新手容易看不懂

反选和全选只需要上面前两个方法就行了,后面的是拓展的,因为用得比较多。
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);                           
}
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);                           
}
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);                           
}

嗯,这里我上面写错了,我写的是全选和取消全选,下面这个才是正确的。
  相关解决方案