Решение для нетерпеливых:
<script>
$("input:checkbox").attr("checked","checked"); // устанавливает галочку на все checkbox-ы
$("input:checkbox").removeAttr("checked"); // снимает галочку со всех checkbox-ов
</script>
Далее обо всем по порядку.
Еще раз о селекторах
В первую очередь, при работе с checkbox-ами в
jQuery нужно составить правильный селектор. Селектор — это выражение по которому
jQuery выбирает необходимые dom-элементы для обработки.
Если селектор будет составлен неправильно, то это приведет к тому, что
jQuery захватит не те элементы. В результате на странице может получиться полная каша.
Составляем правильный селектор
Для того, чтобы построить правильный селектор нужно внимательно посмотреть на HTML код с помощью которого создаются элементы checkbox:
<input type="checkbox" value="" name="chbx"/>
Из приведенного кода видно, что как таковой
checkbox это элемент
input со специальным типом "
checkbox".
Так как отдельного элемента «checkbox» не существует, то использование jQuery селектора "
$('.checkbox')" бессмысленно — на странице попросту нет таких элементов. Использование другого селектора — "
$('.input')", так же не дает положительного результата, потому что на странице может быть множество input-ов с различными типами — кнопки, checkbox-ы, скрытые элементы, файлы и т.д.
Поэтому, правильным будет следующий селектор "
$('input[type=checkbox]')", или более сокращенный его вариант "
$('[type=checkbox]')". В последнем случае мы опустили слово «input», а это значит, что поиск checkbox-ов будет идти по всем элементам присутствующим на странице (слои, ссылки, параграфы и т.д.), что, конечно, негативно скажется на скорости работы
jQuery.
Кроме предложенного варианта существует еще один селектор, который так же находит все checkbox-ы: "
$('input:checkbox')" или "
$(':checkbox')". Опять же обращаю внимание, что во втором случае поиск будет идти по всем элементам страницы, т.е. фактически по селектору "
$('*:checkbox')".
Как отметить все элементы checkbox на странице
Имея правильны селектор, теперь можно перейти к тому как jQuery позволяет обработать необходимые элементы. Например, очень часто нужно отметить все элементы checkbox на странцие. Для этого на checkbox нужно добавить атрибут «checked».
Добавление атрибутов на элементы в
jQuery делается с помощью специального метода "
attr", а удаление с помощью метода "
removeAttr". Работу с этими методами демонстрирует следующий пример:
<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:25px; }
</style>
<script src="/js/jquery.js"></script>
</head>
<body>
<form>
<input type="button" value="Элемент Input c типом 'Button'"/>
<input type="checkbox" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</form>
<div>
</div>
<script>
$("input:checkbox").attr("checked","checked"); // устанавливает галочку на все checkbox-ы
$("input:checkbox").removeAttr("checked"); // снимает галочку со всех checkbox-ов
</script>
</body>
</html>
На этом хотелось бы закончить, но если появились вопросы или дополнения к статье прошу оставлять их в комментариях.