На мой взгляд, весьма напрягает отмечать множество чекбоксов. Уж больно нервы выматывает,особенно если их много и отметить надо все. И так,решение данной проблемы.



Решение было найдено Дэвидом Уолшем и написано на 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

[sourcecode='js']

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; });

});

});

[/sourcecode ]

Вот собственно и все. Очень и очень лего,зато пользы от такой фишки немало

Обещанный пример.