Для работы скрипта нам понадобится jQuery, скачать последнюю версию можно отсюда.
В готовом виде все будет выглядеть вот так:
Для начала зададим чекбоксы и 2 ссылки.
<div id="group1">
<input type="checkbox" name="numbers[]" value="1" />
<input type="checkbox" name="numbers[]" value="2" />
<input type="checkbox" name="numbers[]" value="3" />
<input type="checkbox" name="numbers[]" value="4" />
<input type="checkbox" name="numbers[]" value="5" />
<input type="checkbox" name="numbers[]" value="6" />
<input type="checkbox" name="numbers[]" value="7" />
<input type="checkbox" name="numbers[]" value="8" />
<input type="checkbox" name="numbers[]" value="9" />
<input type="checkbox" name="numbers[]" value="10" />
</div>
Выбрать: <a rel="group1" href="#select_all">Все</a>, <a rel="group1" href="#select_none">Ни одного</a>
Как вы наверное заметили, у ссылок есть атрибут rel=»group1″. Этот атрибут должен, быть точно таким же, как и id дива. Вместо div можно использовать и другие элементы. Например, p, ul, fieldlist и т. д.
Теперь, возьмемся за написание кода, отвечающего за выбор чекбоксов.
<script type="text/javascript">
$(document).ready( function() {
// Выбор всех
//При клике на ссылку "Все", активируем checkbox
$("a[href='#select_all']").click( function() {
$("#" + $(this).attr('rel') + " input:checkbox:enabled").attr('checked', true);
return false;
});
// Ни одного
$("a[href='#select_none']").click( function() {
$("#" + $(this).attr('rel') + " input:checkbox").attr('checked', false);
return false;
});
});
</script>
UPD По просьбе комментатора с ником Alexey, привожу пример выделения всех чекбоксов, с помощью 1-гообщего.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#maincheck").click( function() {
if($('#maincheck').attr('checked')){
$('.mc').attr('checked', true);
} else {
$('.mc').attr('checked', false);
}
});
});
</script>
<input type="checkbox" name="numbers[]" class="mc" value="0" />
<input type="checkbox" name="numbers[]" class="mc" value="1" />
<input type="checkbox" name="numbers[]" class="mc" value="2" />
<input type="checkbox" name="numbers[]" class="mc" value="3" />
<input type="checkbox" name="numbers[]" class="mc" value="4" />
<input type="checkbox" name="numbers[]" class="mc" value="5" />
<input type="checkbox" name="numbers[]" class="mc" value="6" />
<input type="checkbox" name="numbers[]" class="mc" value="7" />
<input type="checkbox" name="numbers[]" class="mc" value="8" />
<input type="checkbox" name="numbers[]" class="mc" value="9" />
<br /><input type="checkbox" name="maincheck" id="maincheck"/>