Выбрать все флажки (checkbox) одной кнопкой
Предположим, у Вас на сайте есть некая форма, которая содержит множество флажков (checkbox). Согласитесь, что выделять или снимать выделение с каждого флажка поочередно неудобно. Поэтому мы предлагаем Вам простой скрипт, написанный на JavaScript, который позволяет выделить или снять выделение со всех флажков формы одной кнопкой.
Ниже для примера создана форма, все флажки которой можно выбрать всего одной кнопкой «Выделить все«. Чтобы очистить все флажки, воспользуйтесь кнопкой «Снять выделение«.
Если Вам на сайт необходимо добавить точно такие же кнопки для добавления или снятия выделения сразу для всех флажков формы, то воспользуйтесь нашим JavaScript кодом, который необходимо будет поместить в тело Вашей странички:
Для того чтобы кнопки работали как положено, саму форму с флажками (checkbox-ами) следует оформлять следующим образом:
Как видите, скрипт совсем простой, но зато он может быть очень полезен тем, у кого на сайте используется большое количество форм и флажков (checkbox), которые постоянно нужно выбирать.
Как сделать выбор группы чекбоксов на JS?
Помогите пожалуйста найти решение или доработать существующее, для переключения группы чекбоксов, одним родительским.
Сложность в том, что один вариант, должен быть в нескольких группах одновременно.
Сейчас использую такой код, который отлично работает если один вариант, чётко к одной группе относится — https://jsfiddle.net/. Нужно такое же, только с возможности перечисления нескольких групп, для чекбокса
Заранее спасибо за любые советы и подсказки.
- Вопрос задан более трёх лет назад
- 516 просмотров
- Вконтакте
Всё оказалось не так сложно как я думал. Вот что сделал— https://jsfiddle.net/
Добавил перебор значений в цикле и селекторы изменил на «вхождение». Само поведение не супер идеальное, в плане логики, но меня устроило.
Список чекбоксов с прокруткой
Найти правильное решение иногда бывает весьма не всегда просто, и когда решение все-таки приходит после долгих поисков, возникают мысли о том, что задача, которая казалась не простой, на самом деле проще некуда. В некоторых формах на сайте иногда нужно сделать список из чекбоксов. Но как вы знаете в стандартном html нет такого элемента формы, которые представлял из себя список из чекбоксов, с возможностью прокрутки. Оказалось, что можно обойтись и без него в принципе.
Пример весьма прост для понимания, поэтому сразу смотрим код:
Группа чекбоксов заключены между в тег div. Для этого тега в CSS задается фиксированный размер, кроме того задается параметр overflow:auto, который собственно и включает полосу прокрутки в случае если установленных размеров блока не достаточно для показа содержимого, в нашем случае это чекбоксы. Таким образом, визуально это выглядит как список чекбоксов с прокруткой, что и требовалось получить.
Результат:
Подобным образом в блоке можно разместить любые элементы формы, и не только. Это удобно тем, что можно размещать данные, которые хотелось бы не растягивать на всё пространство на сайте, а уместить в отведенном для него месте, с возможностью скроллинга.
How to implement "select all" check box in HTML?
I need one more checkbox by the name «select all». When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?
31 Answers 31
UPDATE:
The for each. in construct doesn’t seem to work, at least in this case, in Safari 5 or Chrome 5. This code should work in all browsers:
I’m not sure anyone hasn’t answered in this way (using jQuery):
It’s clean, has no loops or if/else clauses and works as a charm.
I’m surprised no one mentioned document.querySelectorAll() . Pure JavaScript solution, works in IE9+.
here’s a different way less code
When you call document.getElementsByName(«name») , you will get a Object . Use .item(index) to traverse all items of a Object
Slightly changed version which checks and unchecks respectfully
My simple solution allows to selectively select/deselect all checkboxes in a given portion of the form, while using different names for each checkbox, so that they can be easily recognized after the form is POSTed.
I hope you like it!
Try this simple JQuery:
JavaScript is your best bet. The link below gives an example using buttons to de/select all. You could try to adapt it to use a check box, just use you ‘select all’ check box’ onClick attribute.
This page has a simpler example
This sample works with native JavaScript where the checkbox variable name varies, i.e. not all "foo."
It’s rather simple:
If adopting the top answer for jQuery, remember that the object passed to the click function is an EventHandler, not the original checkbox object. Therefore code should be modified as follows.
that should do the job done:
You may have different sets of checkboxes on the same form. Here is a solution that selects/unselects checkboxes by class name, using vanilla javascript function document.getElementsByClassName
The Select All button
Some of the checkboxes to select
This is what this will do, for instance if you have 5 checkboxes, and you click check all,it check all, now if you uncheck all the checkbox probably by clicking each 5 checkboxs, by the time you uncheck the last checkbox, the select all checkbox also gets unchecked
As I cannot comment, here as answer: I would write Can Berk Güder’s solution in a more general way, so you may reuse the function for other checkboxes
Using jQuery and knockout:
With this binding main checkbox stays in sync with underliying checkboxes, it will be unchecked unless all checkboxes checked.
to make it in short-hand version by using jQuery
The select all checkbox
The children checkbox
Below methods are very Easy to understand and you can implement existing forms in minutes
in HTML form put below buttons
in HTML form put below buttons
Here is a backbone.js implementation:
1: Add the onchange event Handler
2: Modify the code to handle checked/unchecked
You can Use This code.
You can use this simple code
Maybe a bit late, but when dealing with a check all checkbox, I believe you should also handle the scenario for when you have the check all checkbox checked, and then unchecking one of the checkboxes below.
In that case it should automatically uncheck the check all checkbox.
Also when manually checking all the checkboxes, you should end up with the check all checkbox being automatically checked.
You need two event handlers, one for the check all box, and one for when clicking any of the single boxes below.