Javascript и чекбоксы

Тема в разделе "Другие языки", создана пользователем SkiLLer, 20 авг 2008.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. SkiLLer

    SkiLLer

    Регистр.:
    22 авг 2007
    Сообщения:
    307
    Симпатии:
    64
    Имеется форма в хтмл с некоторым количеством чекбоксов. Нужно при нажатии на кнопку javascript'ом выбрать те, которые отмечены (checked) и передать в некоторую функцию (передать можно id,name... неважно). Как такое реализовать? Уже всю голову поломал. С джаваскриптами не особо дружу :(.
     
  2. gregzem

    gregzem

    Регистр.:
    21 окт 2007
    Сообщения:
    200
    Симпатии:
    63
    Алгоритм такой:

    1. Получаем ссылку на форму
    2. Берем у формы массив элементов form.elements
    3. в цикле идем по всем элементам elements и проверяем, это чекбокс или нет (можно также смотреть имена, если они у вас по шаблону cb_01, cb_02, cb_03...)
    4. если чекбокс нужный - добавляем в массив пару {имя, состояние checked}
     
    SkiLLer нравится это.
  3. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    175
    Симпатии:
    107
    Я бы немного другой алгоритм использовал:
    1. Нужной группе флагов (чекбоксов) задаем одно и то же имя:
    name="checkbox[]"
    и различные уникальные идентификаторы через id каждому (если потребуется)
    (Так мы сможем решить некоторые другие проблемы:
    1) сможем сгруппировать похожие по цели чекбоксы из разных форм
    2) сможем разместить и другие чекбоксы в нашей форме, выполняющие совсем иные цели, и не участвующие в нашей выборке)
    2. В самой функции, используя document.getElementsByName("checkbox[]") мы сможем без уже ненужной проверки (чекбокс или нет) получить нужный нам массив чекбоксов и отфильтровать: выделен, не выделен.
    3. Заполнить какой нибудь глобальный массив ссылками на выделенные элементы и использовать дальше их свойства (для получения значений и нужной информации) или методы (для изменения текущего состояния).

    Вот рабочий пример с комментариями и пояснениями (IE,FF,OPERA tested:(
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <script type="text/javascript">
        //<!--
            //далее checkbox элементы обозначаю словом флаги
            window.aChecked = new Array();  //глобальный массив где будем хранить выделенные флаги
            function sortChecks(){
                var checks = document.getElementsByName("checkbox[]"); //выбираем по имени массив флагов
                window.aChecked.length = 0; //уничтожаем массив уже сохраненных флагов
                var length = checks.length; //проверяем, а вообще в документе присутствуют флаги с данным именем
                if(checks&&length){
                    for(var i=0;i<length;i++){
                        if(checks[i].checked){ //если флаг был выделен заносим его в конец массива
                               window.aChecked.push(checks[i]);
                        //внимание - в массиве доступна ссылка на сам чекбокс элемент - т.е. через
                        //window.aChecked[нужный индекс].(свойство)(метод) - можно обратиться напрямую
                        //к любому свойству или методу выбранного чекбокса
                        //пример: window.aChecked[i].value - вернет значение,
                        //window.aChecked[i].id - id
                        //window.aChecked[i].checked = false - сбросит установленный флаг
                        }
                    }
                showValues(); //закомментировать или удалить - предназначена только для вывода значений с помощью alert
                }
            }
            function showValues(){
                var length = window.aChecked.length;
                if(length>0){
                var st = "Были установлены следующие флаги: \n"
                    for(var i=0;i<length;i++){
                        st+=window.aChecked[i].value+((i!=length-1)?', ':'');
    
                    }
                }
                alert(st);
            }
        //-->
        </script>
        <title>Hello!</title>
    </head>
    
    <body>
    
    <form name="some" id="some">
                                <input value="Первый" id="checkbox1" name="checkbox[]" type="checkbox" /><label for="checkbox1">Первый</label><br />
                                <!--
                                    имя чекбоска задается как  name="checkbox[]" - со стороны сервереа при submit формы можно
                                     просматривать значения массива  $_REQUEST['checkbox'] - там будут все флаги с этим именем
                                     либо по уникальному имени, пример: $_REQUEST['checkbox1']  (PHP example)
                                     причем со стороны клиента с помощью js нам это позволит выбрать сразу все нужные checkbox ы - на всю
                                     коллекцию задается одно имя name="checkbox[]" (document.getElementsByName("checkbox[]"))
                                     и решить пробему с использованием чекбоксов предназначенных для других целей в этой же форме,
                                     а так же группировать чекбоксы с похожей задачей для нескольких форм
                                -->
                                <input value="Второй" id="checkbox2" name="checkbox[]" type="checkbox" /><label for="checkbox2">Второй</label><br />
                                <input value="Третий" id="checkbox3" name="checkbox[]" type="checkbox" /><label for="checkbox3">Третий</label><br />
                                <input value="Четвертый" id="checkbox4" name="checkbox[]" type="checkbox" /><label for="checkbox4">Четвертый</label><br />
                                <input value="Пятый" id="checkbox5" name="checkbox[]" type="checkbox" /><label for="checkbox5">Пятый</label><br />
                                <input value="Шестой" id="checkbox6" name="checkbox[]" type="checkbox" /><label for="checkbox6">Шестой</label><br />
                                <input type="button" onclick="sortChecks()" value="Кто выделен?"/>
                                <!-- Вызов самой функции при щелчке по кнопке  onclick="sortChecks()"-->
    </form>
    </body>
    
    </html>
    
    
     
    SkiLLer нравится это.
Статус темы:
Закрыта.