Работа с checkbox в jQuery
В данной статье я расскажу о том, как в jquery можно обрабатывать элементы checkbox. В частности будет рассмотрен вопрос получения списка всех элементов checkbox на странице, а так же операции над ними. В конце будут приведены примеры кода на JavaScript.
Еще раз о селекторах
В первую очередь, при работе с checkbox-ами в jQuery нужно составить правильный селектор. Селектор — это выражение по которому jQuery выбирает необходимые dom-элементы для обработки.
Если селектор будет составлен неправильно, то это приведет к тому, что jQuery захватит не те элементы. В результате на странице может получиться полная каша.
Составляем правильный селектор
Для того, чтобы построить правильный селектор нужно внимательно посмотреть на HTML код с помощью которого создаются элементы checkbox:
Из приведенного кода видно, что как таковой 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". Работу с этими методами демонстрирует следующий пример:
На этом хотелось бы закончить, но если появились вопросы или дополнения к статье прошу оставлять их в комментариях.
Еще раз о селекторах
В первую очередь, при работе с 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>
На этом хотелось бы закончить, но если появились вопросы или дополнения к статье прошу оставлять их в комментариях.
Комментарии (11)
RSS свернуть / развернуть21 мая 2010, 04:17
12 мая 2011, 05:45
13 сентября 2011, 00:54
14 сентября 2011, 17:27
05 августа 2010, 09:36
На вот этот html:
прицепим:
В итоге эта конструкция:уже не работает…
Подскажите пожалуйста — где я не прав? Как мне в этом случае со скрипта чекнуть/унчекнуть мой checkbox
08 декабря 2010, 05:58
12 мая 2011, 05:43
13 мая 2011, 23:59
14 мая 2011, 04:42
16 ноября 2011, 19:43
19 ноября 2011, 08:32
Нажмите здесь, чтобы оставить комментарий (регистрация не требуется)