首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js兑现反选和全选

2012-09-01 
js实现反选和全选首先定义一个可以进行全选和反选的checkbox:input typecheckbox nameall idall

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);                           
}
嗯,这里我上面写错了,我写的是全选和取消全选,下面这个才是正确的。

热点排行