在Javascript中寻找对象
[英]finding object in Javascript
问题描述
我有一个包含数千个复选框的表单，当选中一个复选框时，我想选中它下面的所有复选框。 这有效：
<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>
但是对于数千个盒子来说，IE的运行速度令人无法接受。 （Firefox运行良好。）除了遍历整个列表之外，还有更好的方法来找到原始框吗？
5 个解决方案
解决方案1
4 已采纳 2009-02-02 21:34:03
jQuery的两个建议都很好。 对于像这样的DOM，您最好使用一个好的库。
关于将数千个复选框放在表单上的可疑智慧的评论也很好...
但是，如果您确实有这样做的充分理由，并且您不能使用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;
}
}
在FF3，FF3.1，IE6，Chrome 1，Chromium 2中测试
解决方案2
3 2009-02-02 21:09:39
我可能对此不满意，但尝试使用jquery。 它具有为此优化的选择器。
解决方案3
2 2009-02-02 21:10:36
里面做广告！
如果您使用的是jQuery，则可以尝试使用我的插件使循环异步，这将允许运行长循环而不会冻结浏览器。
http://mess.genezys.net/jquery/jquery.async.php
如果您不想使用jQuery，则可以下载插件并根据自己的需要修改代码，它实际上并不依赖jQuery。
解决方案4
2 2009-02-02 21:33:12
您可以像这样读出所选复选框的名称：
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;
}
}
您可以通过使用局部变量来加快代码的速度，并且有一个if语句可以替换。
编辑：实际上，一次性错误不是错误，因为该特定复选框由用户本人（取消）选中。
解决方案5
2 2009-02-02 22:19:23
Dunno有多快，但是您可以尝试jQuery方式，从www.jquery.com获取jQuery并在页面上插入以下代码：
$(function(){
$("input:checkbox").click(function(){
$(this).nextAll("input:checkbox").each(function(){
this.checked = true;
});
});
});
在Javascript中查找对象键
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.