Как запустить форму с помощью чекбокс
Перейти к содержимому

Как запустить форму с помощью чекбокс

  • автор:

Практическое руководство. Задание параметров с помощью элементов управления CheckBox в Windows Forms

Элемент управления Windows Forms CheckBox используется для предоставления пользователям вариантов «Истина/Ложь» или «Да/Нет». При выборе элемента управления отображается флажок.

Задание параметров с помощью элементов управления CheckBox

  1. Проверьте значение свойства Checked, чтобы определить его состояние, и используйте его для задания параметра. В приведенном ниже примере кода при возникновении события CheckedChanged элемента управления CheckBox для свойства формы AllowDrop устанавливается значение false , если установлен флажок. Это полезно для ситуаций, когда требуется ограничить взаимодействие с пользователем.
Private Sub CheckBox1_CheckedChanged(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged ' Determine the CheckState of the check box. If CheckBox1.CheckState = CheckState.Checked Then ' If checked, do not allow items to be dragged onto the form. Me.AllowDrop = False End If End Sub 
private void checkBox1_CheckedChanged(object sender, System.EventArgs e) < // Determine the CheckState of the check box. if (checkBox1.CheckState == CheckState.Checked) < // If checked, do not allow items to be dragged onto the form. this.AllowDrop = false; >> 
private: void checkBox1_CheckedChanged(System::Object ^ sender, System::EventArgs ^ e) < // Determine the CheckState of the check box. if (checkBox1->CheckState == CheckState::Checked) < // If checked, do not allow items to be dragged onto the form. this->AllowDrop = false; > > 

См. также

  • CheckBox
  • Общие сведения об элементе управления CheckBox
  • Практическое руководство. Обработка события щелчка элемента управления CheckBox в Windows Forms
  • Элемент управления CheckBox

Совместная работа с нами на GitHub

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

HTML: Чекбокс

В интернет-магазинах, часто, поиск реализуется с помощью указания категорий, в которых хотим искать товар. Для реализации множественного выбора существуют чекбоксы (или, как их ещё называют — флажки).

Чекбоксы позволяют выбирать множество элементов из представленных:

Для создания чекбокса используются два тега:

  • с указанием type=»checkbox»
  • , в котором будет текст, связанный с нужным нам чекбоксом

Для создания связи с существует два способа:

  • Связь по id . Для этого необходимо задать уникальный id для и связать с чекбоксом с помощью атрибута for
 
  • Вложить внутрь тега . При этом указание уникального id не требуется
 

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

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

 


Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте 2 чекбокса. Свяжите их вложив внутри . Не забудьте добавить атрибуты name и value

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Чекбокс: что это или как обрабатывать события 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.

В коде 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'); >>); >);

Я использую $(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.

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

Как сделать, что бы при нажатию на cheackbox шла отправка его в бд о том, что отмечено. Не используя кнопки, а только по нажатию на чекбокс. Какое то наверно свойство внутри нужно прописать. Или лучше использовать для отправки по клику ajax. что бы страница не перегружалась каждый раз

Отслеживать
задан 5 окт 2017 в 12:42
389 4 4 серебряных знака 24 24 бронзовых знака
с помощью php вы никак не отследите клик.
5 окт 2017 в 12:44
без js тут впринципе не обойтись, так как это не стандартное поведение элемента
5 окт 2017 в 12:45

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Чтобы отследить клик без JavaScript не обойтись. Вешаем функцию на клик чекбокса, где проверяем на всякий случай выбран ли он, после чего отправляем форму.

function sendForm() < if (document.getElementById("myCheckbox").checked) < document.getElementById("myForm").submit(); >>

Отслеживать
ответ дан 5 окт 2017 в 12:48
Jurij Jazdanov Jurij Jazdanov
1,853 9 9 серебряных знаков 9 9 бронзовых знаков

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.3.8.5973

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

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