На мой взгляд, весьма напрягает отмечать множество чекбоксов. Уж больно нервы выматывает,особенно если их много и отметить надо все. И так,решение данной проблемы.
Решение было найдено Дэвидом Уолшем и написано на MooTools 1.2. Допустим мы имеем следующий код:
<table>
<tr>
<th width="30"><img src="checkboxes/uncheck.jpg" id="ucuc" /></th><th>Title</th>
</tr>
<tr>
<td><input type="checkbox" name="approve[]" class="check-me" value="Braveheart" /></td>
<td>Braveheart</td>
</tr>
<tr>
<td><input type="checkbox" name="approve[]" class="check-me" value="Gladiator" /></td>
<td>Gladiator</td>
</tr>
<tr>
<td><input type="checkbox" name="approve[]" class="check-me" value="The Patriot" /></td>
<td>The Patriot</td>
</tr>
<tr>
<td><input type="checkbox" name="approve[]" class="check-me" value="300" /></td>
<td>300</td>
</tr>
</table>
Примечание: картинка с ID “ucuc” яляется своеобразной заглушкой. Посмотрев пример все поймете 
В CSS добавим ID. Сделаем наш код более юзабильным путем добавления указателя на изображение.
#ucuc { cursor:pointer; }
Ну а теперь сам код MooTools
window.addEvent('domready', function() {
$('ucuc').addEvent('click', function() {
if($('ucuc').get('rel') == 'yes')
{
do_check = false;
$('ucuc').set('src','checkboxes/uncheck.jpg').set('rel','no');
}
else
{
do_check = true;
$('ucuc').set('src','checkboxes/check.jpg').set('rel','yes');
}
$$('.check-me').each(function(el) { el.checked = do_check; });
});
});
Вот собственно и все. Очень и очень лего,зато пользы от такой фишки немало
Обещанный пример.
Случайные посты:
Странно как-то. Зачем использовать картинку вместо стандартного инпута. Тут 2 явных минуса. Первый - лишние кб(мелочь, но все же) загрузки (кстати, при достаточно хорошем коннекте картинка “checked” загрузилась не сразу - тогда уж делать предзагрузку с Assets или через background-position). Второй минус - то, что чекбоксы у всех браузеров разные (да и темы для ОС их тоже изменяют), поэтому мне лично будет неприятен чекбокс, выбивающийся из общей тематики. Но, на мой взгляд все это упрощается заменой картинку обычным инпутом. Да и код уменьшается до безобразно короткого:
window.addEvent(’domready’, function() {
$(’ucuc’).addEvent(’click’, function() {
$$(’.check-me’).each(function(el) { el.checked = this.checked; }, this);
});
});
Хотя и в нем желательно сделать поправки (поиск по имени, а не классу (зачем же вводить лишние классы, если имя - в любом случае будет у всех чекбоксов):
$(’ucuc’).addEvent(’click’, function() {
$$(’input[name*="approve"]‘).each(function(el) { el.checked = this.checked; }, this);
});
(здесь поиск элементов не претендует на универсальность, но как вариант, думаю, подойдет)
А еще круче было бы сделать ф-цию, которая бы вешала на один чекбокс возможность отмечать другие. Но при условии, что все они отмечены, а мы нажимаем на любой из них (не на глобальный чек), то с глобального чекбокса (тот, которые может отметить всех остальных) снимался статус “checked”. Еще лучше, если она (ф-ция) будет сделана как расширение для класса Element, чтобы не париться, а писать что-то вроде
$(’ucuc’).globalCheckFor(”approve”);
Если будет надобность - накидаю примерчик.
[Ответить]
Вашу мысль понял и признаю свою неправоту. Рациональнее было б сделать именно так, как вы описали. Спасибо за критику
Принял к сведенью.
[Ответить]
Рад был помочь
Надеюсь, кому-нибудь пригодится
[Ответить]
конечно пригодится
[Ответить]