Как кнопку сделать чекбоксом
Перейти к содержимому

Как кнопку сделать чекбоксом

  • автор:

Как сделать кнопку зависимую от чекбоксов? [закрыт]

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 4 года назад .

У меня есть таблица в которой в каждой строке по чекбоксу и есть кнопка вне таблицы. Надо чтобы если хоть один чекбокс выбран кнопка была активной — иначе не активной ( disabled ). Проблема в том что disabled это атрибут, а не стиль. Значит через CSS это не сделаешь. Я пытался через jquery повесить на все чекбоксы событие change и в нем менять активность кнопки, но это корявое решение которое не всегда работает почему-то. Есть способ получше? P.S. Забыл уточнить. На этой странице используется Pjax для обновления данных таблицы (проект на Yii2). Возможно из-за него как раз и проблема с рандомно работающими событиями.

Чекбокс: что это или как обрабатывать события HTML checkbox

Элемент HTML checkbox позволяет выбрать одно значение в форме. Например, чтобы узнать владеет ли пользователь английским языком, можно добавить чекбокс. Если да, то он устанавливает флажок, если нет — оставляет его пустым.

В этой статье мы рассмотрим:

  • Как обрабатывать события onclick и onchange.
  • Как обрабатывать события checkbox в JQuery.
  • Как отправлять данные формы при установке флажка.
  • Как отобразить / скрыть раздел формы при установке флажка чекбокса.

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

 
Name:
Do you speak English fluently?

Обновлено: 2023-05-30 18:29:18 Вадим Дворников автор материала

Обработка событий checkbox с использованием JavaScript

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

Существует два события, которые можно привязать к чекбоксу. Они будут запускаться после изменения состояния элемента. Это события onclick и onchange.

Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.

Событие onChange в JavaScript срабатывает при изменении значения элемента формы.

В коде HTML я добавляю событие onclick, которое буде вызывать функцию checkFluency():

functioncheckFluency() < varcheckbox=document.getElementById('fluency'); if(checkbox.checked!=true) < alert("you need to be fluent in English to apply for the job"); >>

В checkFluency() мы отслеживаем состояние чекбокса. Если флажок не установлен, то отображаем предупреждение.

Использование jQuery

То же самое можно реализовать с помощью jQuery. В коде примера я подключил jQuery и добавил пару строк CSS для стилизации страницы.

Я также добавил HTML, который мы использовали в предыдущем разделе. В этом примере мы будем использовать jQuery вместо JavaScript.

 
Name:
Do you speak English fluently?

Обратите внимание, что я удалил событие onclick. В jQuery мы будем привязывать событие к элементу без необходимости вызывать его из HTML-кода.

Ниже приводится код JavaScript:

$(document).ready(function() < $('#fluency').change(function() < if(this.checked!=true) < alert('you need to be fluent in English to apply for the job'); >>); >);

Для стилизации checkbox css используются различные техники, позволяющие изменить стандартный вид.

Я использую $(document).ready(); с анонимной функцией. Это функции, объявленные во время выполнения, и без имени.

Внутри анонимной функции я разместил следующий код:

$('#fluency').change(function() < if(this.checked!=true) < alert('you need to be fluent in English to apply for the job'); >>);

Мы используем знак доллара ‘$’ , который является сокращением для jQuery. Поэтому $(‘# fluency’) — это то же самое, что и jQuery (‘# fluency’) . Затем мы привязываем событие и внутри него используем синтаксис анонимных функций во второй раз. Код, находящийся внутри анонимной функции, будет запускаться каждый раз при возникновении события.

if(this.checked!=true)

Это то же самое, что и оператор if, который мы применяли в первом примере. Только вместо document.getElementById() мы используем ключевое слово this. Оно указывает на элемент, который вызовет события. В данном примере это checkbox.

Отправка данных формы при установке флажка

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

$('#fluency').change(function() < if(this.checked==true) < $('#myform').submit(); >>

Скрыть / показать элементы при установке флажка

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

 
show moreinfo

Внутри div располагается форма. В ее поля пользователь вводит имя и адрес электронной почты. В веб-форме также есть чекбокс и текстовая область (textarea).

Когда флажок чекбокса установлен, текстовая область отображается. Поэтому по умолчанию она должна быть скрыта. Для этого мы создаем скрытый контейнер div (с id conditional_part):

#conditional_part

Следующий шаг — создание JavaScript- кода, который будет отображать и скрывать эту текстовую область.

$('#more_info').change(function() < if(this.checked!=true)< $("#conditional_part").hide(); >else < $("#conditional_part").show(); >>);

К checkbox с идентификатором more-info мы привязываем событие onchange, которое запускает анонимную функцию при возникновении события.

Внутри анонимной функции используется оператор if. Он проверяет, установлен ли флажок чекбокса или нет. Затем мы применяем jQuery- функции hide() и show() . Они изменяют значения свойства display блока div с идентификатором conditional_part.

Кнопка вкл/выкл (чекбокс/checkbox) на CSS3

кнопка вкл/выкл

Скачать бесплатно с сервера

Демо демонстрация

↓ Также Вам будет интересно ↓

Любому сайту может пригодится переключатель, кнопка вкл/выкл. Давайте сегодня создадим что-то крутое . Это одна из прекрасных дизайнерских разработок Петра Квятковского. Ещё один из примеров его прекрасных работ, в статье “CSS чекбокс с привлекающим эффектом”. Выглядит солидно и современно, не так ли? На самом деле это обычный css чекбокс, который мы стилизуем и превратим в прекрасную юзабельную кнопочку. Готовую кнопку можно скачать по ссылку выше. Начнем!

HTML структура

Для этого переключателя, нам нужен дополнительный элемент. Давайте используем, что-то вроде i .

Чекбоксы в виде кнопок

В продолжении статьи о стилизации чекбоксов, несколько примеров как стилизовать чекбоксы в кнопки и группы кнопок.

Кнопки

HTML-разметка:
     
Фокус по клавише Tab:
$(window).keyup(function(e) < var target = $('.checkbox-btn input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-btn input').focusout(function()< $(this).parent().removeClass('focused'); >);
CSS-стили:
.checkbox-btn < display: inline-block; margin: 0 5px 0 0; user-select: none; position: relative; >.checkbox-btn input[type=checkbox] < z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-btn span < display: inline-block; cursor: pointer; padding: 0px 10px; line-height: 30px; border: 1px solid #999; border-radius: 4px; transition: background 0.2s ease; >/* Checked */ .checkbox-btn input[type=checkbox]:checked + span < background: #ffe0a6; >/* Focus */ .focused span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-btn:hover < color: #666; >/* Active */ .checkbox-btn input[type=checkbox]:active:not(:disabled) + span < background: #d2c5ac; color: #000; >/* Disabled */ .checkbox-btn input[type=checkbox]:disabled + span < background: #efefef; color: #666; cursor: default; >.checkbox-btn input[type=checkbox]:checked:disabled + span
Результат:

Группа кнопок

HTML-разметка:
 
Checkbox #1
Фокус по клавише Tab:
$(window).keyup(function(e) < var target = $('.checkbox-btn-group input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-btn-group input').focusout(function()< $(this).parent().removeClass('focused'); >);
CSS-стили:
.checkbox-btn-group < display: inline-block; >.checkbox-btn-group:after < content: ""; clear: both; display: block; >.checkbox-btn-group label < display: inline-block; float: left; margin: 0; user-select: none; position: relative; >.checkbox-btn-group input[type=checkbox] < z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-btn-group span < display: inline-block; cursor: pointer; padding: 0px 10px; line-height: 30px; border: 1px solid #999; border-right: none; transition: background 0.2s ease; >.checkbox-btn-group label:first-child span < border-radius: 4px 0 0 4px; >.checkbox-btn-group label:last-child span < border-radius: 0 4px 4px 0; border-right: 1px solid #999; >/* Checked */ .checkbox-btn-group input[type=checkbox]:checked + span < background: #ffe0a6; >/* Focus */ .checkbox-btn-group .focused span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-btn-group label:hover < color: #666; >/* Active */ .checkbox-btn-group input[type=checkbox]:active:not(:disabled) + span < background: #d2c5ac; color: #000; >/* Disabled */ .checkbox-btn-group input[type=checkbox]:disabled + span < background: #efefef; color: #666; cursor: default; >.checkbox-btn-group input[type=checkbox]:checked:disabled + span

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *