найти объект в Javascript - PullRequest
Новая
       15

найти объект в Javascript

1 голос
/ 03 февраля 2009

У меня есть форма с тысячами флажков, и когда один из них установлен, я хочу отметить все поля под ним. Это работает: 

<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 ]

4 голосов
/ 03 февраля 2009

Оба предложения 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

3 голосов
/ 03 февраля 2009

я бы за это проголосовал, но попробуйте использовать jquery для этого оптимизированы селекторы.

2 голосов
/ 03 февраля 2009

Не знаю, насколько это быстро, но вы можете попробовать jQuery-путь, взять jQuery с www.jquery.com и вставить следующий код на страницу: 

$(function(){
    $("input:checkbox").click(function(){
        $(this).nextAll("input:checkbox").each(function(){
            this.checked = true;
        });
    });
});
2 голосов
/ 03 февраля 2009

Вы можете прочитать название выбранного флажка следующим образом: 

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 -словие, которое можно заменить.

Редактировать: На самом деле это однократная ошибка не является ошибкой, потому что этот конкретный флажок был (не) проверен самим пользователем.

2 голосов
/ 03 февраля 2009

Реклама внутри!

Если вы используете jQuery, вы можете попробовать мой плагин, чтобы сделать ваш цикл асинхронным, это позволит запустить длинный цикл без зависания браузера.

http://mess.genezys.net/jquery/jquery.async.php

Если вы не хотите использовать jQuery, вы можете скачать плагин и изменить код для своих собственных нужд, это на самом деле не зависит от jQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...