使用js 实现全选及取消操作，速度很慢慢。

esunshine 2009-10-21 03:14:52
大概有1000多列需要选择。
...全文
217 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
develop_design_level 2009-10-21
  • 打赏
  • 举报
 回复
还有，楼主，对于for循环，
第一中情况：


    var all = document.getElementsByName('checkboxName');

    for(var i = 0; i < all.length; i++){

        all[i].checked = true;

    }

第二种情况：


    var all = document.getElementsByName('checkboxName');

    for(var i = 0; all[i]; i++){

        all[i].checked = true;

    }

当数据量很大的时候，第二种循环方法的速度远远高于第一种循环方法。不信你可以试验一下。

--- 记得：给分哦
develop_design_level 2009-10-21
  • 打赏
  • 举报
 回复 


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>  

    <title>My JSP 'index.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">    

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	<script type="text/javascript">

	function $(id){

		if(document.getElementById){

			return document.getElementById(id);

		}

	}

	window.onload = function(){

		var checkboxAllObj = $('checkBoxAll');

		checkboxAllObj.onclick = function(){

			var checkBoxArray = document.getElementsByName('checkboxName');

			if(checkboxAllObj.checked){

				for(var i = 0 ; checkBoxArray[i]; i++){

					checkBoxArray[i].checked = true;

				}

			}else{

				for(var i = 0 ; checkBoxArray[i]; i++){

					checkBoxArray[i].checked = false;

				}

			}

			

		};

	}

	</script>

  </head>

  

  <body>

   全选<input type="checkbox" id="checkBoxAll" name="checkboxAllName"/>

    <table style="width:800px;border: 1 solid black;">

    	<%

    		for(int i = 0 ; i < 15000; i++){//注释：我这里生成的是15000行的数据表格，选择速度，就是瞬间实现。我还试验了 150000 行，选择时间大概是 2.5s

    	 %>

    		<tr style="background-color:silver;">

    			<td style="width:10%;">No.<%=(i + 1) %></td>

    			<td style="width:10%;"><input type="checkbox" name="checkboxName"/></td>

    			<td>hello</td>

    		</tr>

    	 <%

    	 }

    	  %>

    </table>

  </body>

</html>
BearRui 2009-10-21
  • 打赏
  • 举报
 回复
尽量减少查询的次数和查询到的对象值：
1. 给所有需要全选的checkbox取相同的name，比如name="n"

//用1个全局变量保存查询到的所有checkbox，这些下次点击"全选"或者"取消全选 "的时候就不需要查找DOM，速度快不少
var nAll =null;
function check(f)
{
if(nAll ==null)
nAll = document. getElementsByName("n");
var aa = nAll.length;
//先用1个变量记住form1.allcheck是否选择，如果把form1.allcheck.checked放到循环中，每次循环都需要在DOM中查找allcheck，影响效率
var ch = form1.allcheck.checked;
for(var i=0;i <=aa ;i++)
{
nAll[i].checked= ch;
}
}
foolbirdflyfirst 2009-10-21
  • 打赏
  • 举报
 回复 
<input type='checkbox' onclick='check("cid",this.checked)'/>点我全选<br/>

<input type='checkbox' name='cid'/><br/>

<input type='checkbox' name='cid'/><br/>

<input type='checkbox' name='cid'/>

<script type='text/javascript'>

function check(name,t)

{

	var a = document.getElementsByName(name);

	var aa = a.length;

	for(var i=0;i<aa ;i++)

	{

		a[i].checked = t;

	}

}
esunshine 2009-10-21
  • 打赏
  • 举报
 回复
这个是全部代码：有哪里还可以优化。
<script language ="javascript" type ="text/javascript"> 

    function check(f)

    {

        var a = document.getElementsByTagName("input");

	var aa = a.length;

        for(var i=0;i <=aa ;i++)

        {

            if(a[i].type=="checkbox"&&!a[i].disabled)

            {



                a[i].checked=form1.allcheck.checked;

            }



        }

    }



	function addCheckEvent() 

        {

            show() 

            var objs=document.getElementsByTagName("INPUT");

            var n = objs.length;

            for(var i=1;i < n ;i++) 

            { 

                if(objs[i].type=="checkbox") 

                { 

                    objs[i].onclick=show 

                } 

            } 

        }

	function show() 

	{ 

		var objs=document.getElementsByTagName("INPUT"); 

		var ifAllChecked=true; 

		var ss = objs.length;

		for(var i=1;i < ss;i++) 

		{ 

			if(objs[i].type=="checkbox") 

			{ 

			    if(!objs[i].checked)

			    {

			    	ifAllChecked=false;

			    	break;

			    } 

			} 

		} 

		document.getElementById("allcheck").checked=ifAllChecked 

	} 

</script>
BeenZ 2009-10-21
  • 打赏
  • 举报
 回复
就是所有条件为真才继续执行,又给你优化了下,应该会再提高点速度


<script>

    function check(f)

    {

        var a = document.getElementsByTagName("input");

        var aa = a.length;

        var isForm1check=form1.allcheck.checked

        for(var i=0;i <=aa ;i++)

        {

            var tmpa=a[i]

            if(tmpa&&tmpa=="checkbox"&&!tmpa.disabled)

            {

                tmpa.checked=isForm1check;

            }



        }

    }

</script>
esunshine 2009-10-21
  • 打赏
  • 举报
 回复
与a[i] 并啥意识呢
BeenZ 2009-10-21
  • 打赏
  • 举报
 回复
&& 逻辑判断符 与
esunshine 2009-10-21
  • 打赏
  • 举报
 回复
谢谢楼上的，请问a[i]&&是什么意思。
我修改为
 function check(f)

    {

        var a = document.getElementsByTagName("input");

        var aa = a.length;

        for(var i=0;i <=aa ;i++)

        {

            if(a[i]&&a[i].type=="checkbox"&&!a[i].disabled)

            {



                a[i].checked=form1.allcheck.checked;

            }



        }

    }


速度又快点。现在600行，5s钟。还有优化的空间吗？谢谢。
jol_boy 2009-10-21
  • 打赏
  • 举报
 回复
一点就全选了~~没那么慢 啊~~10000条的时候慢~~


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>



 <BODY>

  <input type="button" value="SelectAll" onclick="selectAll()"/>

  <SCRIPT LANGUAGE="JavaScript">

  var table=document.createElement("TABLE");

  table.id="tbl";

  var tbody = document.createElement("TBODY");

	for(var i=0;i<1000;i++)

	{

	  var tr=document.createElement("TR");

	  var td =document.createElement("TD");

	  var checkbox=document.createElement("INPUT");

	  checkbox.type="checkbox";

	  checkbox.name="checkbox";

	  td.appendChild(checkbox);

	  tr.appendChild(td);

	  tbody.appendChild(tr);

	}



	 table.appendChild(tbody);

     document.body.appendChild(table);



	function selectAll()

	{

		var table=document.getElementById("tbl");

		for(var i=0;i<table.rows.length;i++)

		{

			table.rows[i].cells[0].childNodes[0].checked=true;

		}

	}

  </SCRIPT>

 

 </BODY>

</HTML>
BeenZ 2009-10-21
  • 打赏
  • 举报
 回复
帮你优化了下,去掉个全局变量



 function check(f)

    {

        var a = document.getElementsByTagName("input");

        for(var i=0;i <=a.length ;i++)

        {

            if(a[i]&&a[i].type=="checkbox"&&!a[i].disabled)

            {



                a[i].checked=form1.allcheck.checked;

            }



        }

    }
esunshine 2009-10-21
  • 打赏
  • 举报
 回复
function check(f)
{
var a = f.all.length
for(var i=0;i <=a ;i++)
{
tmpobject=null;
tmpobject=f.all[i];
if(tmpobject)
{
if(tmpobject.type=="checkbox")
{
if(!tmpobject.disabled)
{
tmpobject.checked=form1.allcheck.checked;
}
}
}
}
}
esunshine 2009-10-21
  • 打赏
  • 举报
 回复
不好意思，1000多行。
function check(f)
{
var all = f.all.length
for(var i=0;i <=all ;i++)
{
tmpobject=null;
tmpobject=f.all[i];
if(tmpobject)
{
if(tmpobject.type=="checkbox")
{
if(!tmpobject.disabled)
{
tmpobject.checked=form1.allcheck.checked;
}
}
}
}
}
BeenZ 2009-10-21
  • 打赏
  • 举报
 回复
循环判断的地方发来看看
develop_design_level 2009-10-21
  • 打赏
  • 举报
 回复
楼主，是“行”还是“列”啊？你要达到什么效果，描述一下啊。你冒出这么一句话，谁能明白？
jol_boy 2009-10-21
  • 打赏
  • 举报
 回复
代码？？？？是不是你的遍历算法有问题~
计算机应用技术(实用手册)
内存模块上的EEPROM (只读存储器) 储存有关模块的重要参数信息，例如内存类型、大小、速度、电压接口及模块储存区域。 CAS Latency Time： 这个项目可控制DRAM读取指令与数据成为真正可用的时间之间的延迟时间。...
实现全选和取消全选
点击“全选老大”实现全选，再次点击取消全选，以此类推。 html代码是不变的： <div id="mycheckbox"> <input type="checkbox" id="selectAll"><br> <input type="checkbox"><br...
# **小白也能看懂JS添加，全选，所选删除**
通过javascript对表格进行按钮添加，全选/不全选，所选删除操作。超详细解答，小白一眼就懂 先看一下我的代码，在js代码里我会详细讲解每一行，结尾会总体讲解js的思路 <style> #box{ text-align: center; ...
全选和全部取消 复选框
check test 全选: 多项选择框列表: //全选或全部不选 function checkall() { var isChecked=(document.form1.checkAll.checked == true); var
React antd tree树组件 - 父子节点没有自动关联情况下 - 显示半选、全选状态以及实现父子节点互动
实现的效果图如下： 如Ant Design Vue 中所示，并没有提供获取半选节点的方法，当设置checked和checkStrictly时，父子节点也不再自动关联了 前提：从后端可以获取的数据分别是完整的树型数据、所有选中的节点数据...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章