jquery отметить все чекбоксы

Чекбоксы — оптимизируем выбор с помощью jQuery

Допустим, у вас есть HTML форма и в ней N кол-во групп чекбоксов, которые нужно отметить, проверить или сделать какую-то другую рутинную работу. Проверять состояние каждого input type checkbox? Глупо. Далее, я опишу как можно упростить работу с подобными формами используя еще один дополнительный чекбокс…

Проверка чекбоксов

В любом случае, если у вас есть сложная форма, то нужно максимально оптимизировать работу с ней. Например, у меня было 125 чекбоксов с которыми нужно было взаимодействовать пользователю. Проблемы нет, если нужно установить несколько флажков, а если нужно отметить все? Или если нужно отметить 100, а остальные 25 оставить как есть? Как сделать работу с чекбоксами более гибкой?

Поэтому, я решил ввести еще один чекбокс — 126-ой в самом верху формы-таблицы и дублировать его состояние на другие оставшиеся input-ы. Если главный чекбокс выбран — 125 чекбоксов автоматически получают checked состояние, если главный чекбокс не выбран, то снимается галочка со всех чекбоксов.

Добавляем форму с чекбоксами

Теперь, нам остается добавить форму и соответствующий jQuery код. Скрипт будет считать все отмеченные инпуты и складывать их значения через запятую в скрытое поле ввода. После этого, все значения из этого поля будут считываться и активировать нужный чекбокс из списка. Теперь, добавим форму с чекбоксами и немного PHP ( куда же без него 🙂 ). Для более наглядного примера, можете кроме библиотеки jQuery, также подключить Bootstrap и Font Awesome.

Источник

Как в jQuery проверить checkbox

Дата публикации: 2016-09-12

От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как в jQuery проверить, отмечен ли checkbox формы. Это достаточно полезная вещь, поскольку часто, в зависимости от того, был ли отмечен чекбокс, программа должна работать по тому или иному сценарию.

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, перед нами стоит задача проверить checkbox средствами jQuery. К примеру, мы хотим реализовать следующий функционал. У нас есть кнопка отправки формы, которая изначально не активна. И, если пользователь отметил checkbox, мы должны активировать кнопку. Давайте попробуем. Для начала создадим простенькую форму:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Для того, чтобы форма выглядела красиво и при этом не пришлось писать стили, я использую CSS фреймворк Bootstrap. В итоге получилась вот такая симпатичная форма. При этом, благодаря атрибуту disabled, кнопка не активна.

Ну что же, осталось лишь реализовать функционал, который разблокирует кнопку при отметке чекбокса и вновь заблокирует ее, если отметку снять. С jQuery это пустяковая задача, которая решается буквально несколькими строками кода.

Для решения задачи воспользуемся методом prop() со значением checked, который вернет true или false в зависимости от того, отмечен checkbox или нет. Код будет таким:

Источник

Космонавт в лодке

Личный блог Олега Абражаева о программировании, технологиях и о жизни

Рубрики

Облако меток

Свежие комментарии

livelib.ru

Подписаться на обновления!

Переключение чекбоксов с помощью jQuery – инвертировать checkbox

Цитируя сайт, откуда я хотел взять решение:

На днях мне нужно было написать небольшую JavaScript функцию (на jQuery), которая переключала бы группу чекбоксов. Т.е. все отмеченные чекбоксы должны были стать неотмеченными и наоборот.

Действительно это наверное распространенная задача переключать checkbox и она как нельзя лучше решается с помощью jQuery.

Предложенный на том сайте метод у меня почему-то не работал.

Может быть дело в том, что прошло уже 4 года и что-то изменилось в jQuery или в браузерах. Баг был в том, что когда был клик на чекбоксе, то это событие шло впереди события jQuery click и checkbox уже считался отмеченным. Соответсвенно по логике ф-ии сначала выбираются все чекбосы и все не отмеченные. Потом все делаются не отмеченными, а бывшие не отмеченные – отмеченными. Но по клику чекбокс уже считался отмеченным и не попадал в не отмеченные и не отмечался после.

Вот мое работающее решение:

Мой пример отличается тем, что я делаю отмеченным только нажатый чекбокс. В моем случае их просто всегда было два и надо было переключаться между ними. Чтобы инвертировать все чекбоксы можно дописать ф-ю на основе предыдущего примера:

Источник

Установка «checked» для флажка с jQuery?

Я хотел бы сделать что-то подобное, чтобы отметить checkbox с помощью jQuery:

Существует ли такая вещь?

ОТВЕТЫ

Ответ 1

Современный jQuery

DOM API

jQuery 1.5.x и ниже

Ответ 2

И если вы хотите проверить, установлен ли флажок или нет:

Ответ 3

Это правильный способ проверки и снятия флажков с помощью jQuery, так как он является межплатформенным стандартом и позволяет отправлять репортажи.

При этом вы используете стандарты JavaScript для проверки и снятия флажков, поэтому любой браузер, который правильно реализует свойство «checked» элемента checkbox, будет безупречно работать с этим кодом. Это должны быть все основные браузеры, но я не могу протестировать ранее Internet Explorer 9.

Проблема (jQuery 1.6):

Вот пример атрибута флажка, который не смог выполнить задание после того, как кто-то щелкнул этот флажок (это происходит в Chrome).

Решение:

Используя свойство «checked» JavaScript на элементах DOM, мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM, чтобы делать то, что мы хотим это сделать.

Этот плагин изменит свойство checked любых элементов, выбранных jQuery, и успешно проверит и снимет флажки при любых обстоятельствах. Таким образом, хотя это может показаться излишним решением, это сделает ваш сайт более удобным и поможет предотвратить разочарование пользователя.

В качестве альтернативы, если вы не хотите использовать плагин, вы можете использовать следующие фрагменты кода:

Ответ 4

Если у вас есть пользовательский код в событии onclick для флажка, который вы хотите запустить, используйте вместо этого:

Вы можете снять флажок, полностью удалив атрибут:

Вы можете проверить все флажки следующим образом:

Ответ 5

Тогда вы можете просто сделать:

Или вы можете указать им более уникальные имена, такие как mycheck() и myuncheck(), если вы используете другую библиотеку, которая использует эти имена.

Ответ 6

Ответ 7

Чтобы установить флажок, вы должны использовать

и чтобы снять флажок, вы всегда должны установить значение false:

он удаляет атрибут вместе, и поэтому вы не сможете reset создать форму.

BAD DEMO jQuery 1.6. Я думаю, что это сломано. Для 1.6 я собираюсь сделать новое сообщение.

Оба демо используют

Ответ 8

Это выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку «ckbItem»:

Он выберет все элементы, содержащие ckbItem в свойстве name.

Ответ 9

Предполагая, что вопрос.

Как установить флажок-флажок BY VALUE?

Помните, что в типичном флажковом флажке все теги ввода имеют одинаковое имя, они отличаются атрибутом value : для каждого входа набора нет идентификатора.

Сиань-ответ может быть расширен с помощью более конкретного селектора, используя следующую строку кода:

Ответ 10

Мне не хватает решения. Я всегда буду использовать:

Ответ 11

Чтобы установить флажок, используя jQuery 1.6 или выше, выполните следующее:

Чтобы снять флажок, используйте:

Вот что мне нравится использовать для переключения флажка с помощью jQuery:

Если вы используете jQuery 1.5 или ниже:

Чтобы снять флажок, используйте:

Ответ 12

Вот способ сделать это без jQuery

Ответ 13

Ответ 14

Вот код для отмеченного и непроверенного с помощью кнопки:

Обновление. Вот тот же блок кода, в котором используется новый метод поддержки Jquery 1.6+, который заменяет attr:

Ответ 15

Мы можем использовать elementObject с jQuery для проверки атрибута:

Мы можем использовать это для всех версий jQuery без ошибок.

Обновление: JQuery 1.6+ имеет новый метод prop, который заменяет attr, например:

Ответ 16

Если вы используете PhoneGap разработку приложений, и у вас есть значение на кнопке, которую вы хотите отобразить мгновенно, не забудьте сделать это

Я обнаружил, что без диапазона интерфейс не будет обновляться независимо от того, что вы делаете.

Ответ 17

Вот код и демонстрация того, как проверить несколько флажков.

Ответ 18

Другое возможное решение:

Ответ 19

Если вы используете мобильный телефон и хотите, чтобы интерфейс обновлялся и отображался флажок как снятый, используйте следующее:

Ответ 20

Помните об утечках памяти в Internet Explorer перед Internet Explorer 9, как Состояние документации jQuery:

Ответ 21

Для jQuery 1.5.x и ниже

Ответ 22

Как сказал @livefree75:

jQuery 1.5.x и ниже

Но в новых версиях jQuery мы должны использовать что-то вроде этого:

jQuery 1.6 +

Тогда вы можете просто сделать:

Ответ 23

Чтобы проверить и снять флажок

Ответ 24

Ответ 25

Это, вероятно, самое короткое и простое решение:

Ответ 26

Обычный JavaScript очень прост и намного меньше накладных расходов:

Ответ 27

Я не мог заставить его работать, используя:

И true, и false установили флажок. Что для меня работало:

Ответ 28

Когда вы установили флажок, например:

этого может быть недостаточно. Вы также должны вызвать функцию ниже;

Особенно, когда вы удалили флажок проверять атрибут.

Ответ 29

Здесь полный ответ используя jQuery

Источник