在Javascript中寻找对象
[英]finding object in Javascript
问题描述
I have a form with thousands of checkboxes, and when one is checked, I want to check all the boxes below it. 
我有一个包含数千个复选框的表单，当选中一个复选框时，我想选中它下面的所有复选框。 This works: 这有效：
<html>
<body>
<form name="myform">
<input type="checkbox" name="box1" onClick="redrawboxes(this);">1<br>
<input type="checkbox" name="box2" onClick="redrawboxes(this);">2<br>
...
</form>
</body>
</html>
<script>
function redrawboxes(obj){
//check all boxes below
var foundit=false;
for (e=0; e<document.myform.elements.length; e++){
if (foundit==false){ //search for checked obj
if(obj == document.myform.elements[e]){
foundit=true;
}
}else{ //continuing below checked box
if(obj.checked){ //are we checking or unchecking
document.myform.elements[e].checked = true;
}else{
document.myform.elements[e].checked = false;
}
}
}
}
</script>
but for more than a few thousand boxes, IE is unacceptably slow. 但是对于数千个盒子来说，IE的运行速度令人无法接受。 (Firefox works fine.) Is there a better way to find the original box besides iterating through the whole list? （Firefox运行良好。）除了遍历整个列表之外，还有更好的方法来找到原始框吗？
5 个解决方案
解决方案1
4 已采纳 2009-02-02 21:34:03
Both of the jQuery suggestions are pretty good. jQuery的两个建议都很好。 For DOM wrangling like this, you're really better off using a good library. 对于像这样的DOM，您最好使用一个好的库。
And the comment about the dubious wisdom of putting thousands of checkboxes on a form is pretty good as well... 关于将数千个复选框放在表单上的可疑智慧的评论也很好...
But, on the off-chance that you do have a good reason for doing this, and you can't use jQuery or similar, here's a fast, straight JS method: 但是，如果您确实有这样做的充分理由，并且您不能使用jQuery或类似的工具，这是一种快速，简单的JS方法：
function redrawboxes(obj)
{
//check all boxes below
var next = obj;
while ( (next = next.nextSibling) )
{
if ( next.nodeName.toLowerCase() == "input"
&& next.type.toLowerCase() == "checkbox" )
next.checked = obj.checked;
}
}
tested in FF3, FF3.1, IE6, Chrome 1, Chromium 2 在FF3，FF3.1，IE6，Chrome 1，Chromium 2中测试
解决方案2
3 2009-02-02 21:09:39
i might get down voted for this, but try using jquery. 我可能对此不满意，但尝试使用jquery。 it has selectors optimized for that. 它具有为此优化的选择器。
解决方案3
2 2009-02-02 21:10:36
Advertising inside ! 里面做广告！
If you are using jQuery, you can try my plugin to make your loop asynchronous, this will allow to run a long loop without freezing the browser. 如果您使用的是jQuery，则可以尝试使用我的插件使循环异步，这将允许运行长循环而不会冻结浏览器。
http://mess.genezys.net/jquery/jquery.async.php http://mess.genezys.net/jquery/jquery.async.php
If you don't want to use jQuery, you can download the plugin and modify the code for your own needs, it does not really depend on jQuery. 如果您不想使用jQuery，则可以下载插件并根据自己的需要修改代码，它实际上并不依赖jQuery。
解决方案4
2 2009-02-02 21:33:12
You can read out the name of the selected checkbox like this: 您可以像这样读出所选复选框的名称：
function redrawboxes(obj) {
var name = obj.name;
var state = obj.checked;
// get that index
var index = name.substr(3) * 1; // just to be sure it's a number
var length = document.myform.elements.length;
var allElements = document.myform.elements
// (un)check all elements below
for (var i = index; i < length; i++) {
allElements[i].checked = state;
}
}
You could have sped up your code quite a bit by using local variables and there's an if -statement that can be replaced. 您可以通过使用局部变量来加快代码的速度，并且有一个if语句可以替换。
Edit: Actually that one-off-error isn't an error because that specific checkbox was (un)checked by the user himself. 编辑：实际上，一次性错误不是错误，因为该特定复选框由用户本人（取消）选中。
解决方案5
2 2009-02-02 22:19:23
Dunno how fast it is, but you could try the jQuery-way, grab jQuery from www.jquery.com and insert the following code on the page: Dunno有多快，但是您可以尝试jQuery方式，从www.jquery.com获取jQuery并在页面上插入以下代码：
$(function(){
$("input:checkbox").click(function(){
$(this).nextAll("input:checkbox").each(function(){
this.checked = true;
});
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.