Реализовать кнопку с поведением флажка

Kazachek

Здравствуйте. Есть меню из 4 пунктов. Как сделать так чтоб при нажатии и отпускании кнопка отобразилась как нажатая при повторном нажатии приобрела свой первоначальный облик.Так же, после нажатия нужно в переменную filter добавить название всех активных кнопок.Надеюсь вы поняли о чем я, если есть готовые примеры или что то похожее или ссылки поделитесь пожалуйста очень нужно. Спасибо ***************** во вложении
5 ответов

Kazachek

Как я понял, это делается с помощью checkbox-ов. Есть 4 скрытых чекбокса и есть 8 изображений: 4 стандарнтые и 4 active. При клике на изображение, checkbox становиться checked и стандартное изображение меняется на ховер, и отправляется запрос в обработчик. Ну помогите вы же знаете это(((Помогаем друг другу((


Kazachek

Как-то так?
<HTML>
<SCRIPT>
var filter = []
function makeFilter()
{
    var buttons = document.getElementsByClassName("filter");
 
    filter.length = 0;
 
    for (var h = 0; h < buttons.length; h++)
    {
        if (buttons[h].value == "checked") filter[filter.length] = buttons[h].innerHTML;
    }
    result.innerHTML = filter;
}
function toggleButton(button)
{
    if (button.value == "checked")
    {
        button.value = "0";
        button.style.background = "white";
    }
    else
    {
        button.value = "checked";
        button.style.background = "red";
    }
    makeFilter();
}
</SCRIPT>
<BODY>
<BUTTON CLASS = "filter" VALUE = "0" onClick = "toggleButton(this)">1</BUTTON>
<BUTTON CLASS = "filter" VALUE = "0" onClick = "toggleButton(this)">2</BUTTON>
<BUTTON CLASS = "filter" VALUE = "0" onClick = "toggleButton(this)">3</BUTTON>
<BUTTON CLASS = "filter" VALUE = "0" onClick = "toggleButton(this)">4</BUTTON>
<BUTTON CLASS = "filter" VALUE = "0" onClick = "toggleButton(this)">5</BUTTON>
<BR><SPAN ID = "result"></SPAN>
</BODY>
</HTML>
не стал заморачиваться с изображением для кнопок, просто покрасил их в разные цвета...


Kazachek

ChildOfFlowers, Спасибо, скрипт работает, но я так и не понял как он работает(( Сначала объявили переменную Filter- и оставили пустым Потом создали функцию MakeFilter - для применения фильтра Потом внутри MakeFilter создали переменную Buttons, где хранятся данные с классом Filter Потом установили длину переменной filter=0 Далее идет цикл - и дальше я понял(( начиная с цикла. Можете объяснить пожалуйста. Чтоб я понял как это работает. Огромное спасибо


Kazachek

Сначала срабатывает функция toggleButton, поэтому её надо читать первой:
var filter = [] // Создаём массив для значений фильтров
function makeFilter() // создаёт массив фильтров и выводит его значения на экран
{
    var buttons = document.getElementsByClassName("filter"); // находим все нужные нам кнопки, помеченные классом "filter"
 
    filter.length = 0; // обнуляем массив чтобы новые данные заменили предыдущие, а не добавились к ним
 
    for (var h = 0; h < buttons.length; h++) // проверяем состояние каждой кнопки поочерёдно
    {
        if (buttons[h].value == "checked") filter[filter.length] = buttons[h].innerHTML; // если атрибут value очередной кнопки имеет значение "checked", добавляем текст с кнопки в массив filter
    }
    result.innerHTML = filter; // выводим значения массива filter в специально отведённом для этого месте
}
function toggleButton(button) // отвечает за внешний вид кнопки, а также устанавливает флаг "checked" в атрибуте value
{
    if (button.value == "checked") // если флаг "checked" уже установлен...
    {
        button.value = "0"; // ... убираем его...
        button.style.background = "white"; // ...и красим кнопку в белый цвет...
    }
    else // в противном случае
    {
        button.value = "checked"; // устанавливаем флаг "checked"...
        button.style.background = "red"; // ...и красим кнопку в красный цвет
    }
    makeFilter(); // а теперь запускаем функцию makeFilter
}
Функция toggleButton в качестве атрибута (button) получает ссылку на нажатую кнопку. Думаю, использовать атрибут value в качестве флага - не лучшая идея - он совсем для другого предназначен, но мне наскоро в голову ничего умнее не пришло


Kazachek

Изучаю, постараюсь что нибудь нашаманить свои силами - позже поделюсь результатом. Огромное спасибо.