Как работать с checkbox
Элемент CheckBox или флажок предназначен для установки одного из двух значений: отмечен или не отмечен. Чтобы отметить флажок, надо установить у его свойства Checked значение true .
Кроме свойства Checked у элемента CheckBox имеется свойство CheckState , которое позволяет задать для флажка одно из трех состояний — Checked (отмечен), Indeterminate (флажок не определен — отмечен, но находится в неактивном состоянии) и Unchecked (не отмечен)
Также следует отметить свойство AutoCheck — если оно имеет значение false , то мы не можем изменять состояние флажка. По умолчанию оно имеет значение true .
При изменении состояния флажка он генерирует событие CheckedChanged . Обрабатывая это событие, мы можем получать измененный флажок и производить определенные действия:
private void checkBox_CheckedChanged(object sender, EventArgs e) < CheckBox checkBox = (CheckBox)sender; // приводим отправителя к элементу типа CheckBox if (checkBox.Checked == true) < MessageBox.Show("Флажок " + checkBox.Text + " теперь отмечен"); >else < MessageBox.Show("Флажок " + checkBox.Text + " теперь не отмечен"); >>
Radiobutton
На элемент CheckBox похож элемент RadioButton или переключатель. Переключатели располагаются группами, и включение одного переключателя означает отключение всех остальных.
Чтобы установить у переключателя включенное состояние, надо присвоить его свойству Checked значение true .
Для создания группы переключателей, из которых можно бы было выбирать, надо поместить несколько переключателей в какой-нибудь контейнер, например, в элементы GroupBox или Panel. Переключатели. находящиеся в разных контейнерах, будут относиться к разным группам:
Похожим образом мы можем перехватывать переключение переключателей в группе, обрабатывая событие CheckedChanged . Связав каждый переключатель группы с одним обработчиком данного события, мы сможем получить тот переключатель, который в данный момент выбран:
private void radioButton_CheckedChanged(object sender, EventArgs e) < // приводим отправителя к элементу типа RadioButton RadioButton radioButton = (RadioButton)sender; if (radioButton.Checked) < MessageBox.Show("Вы выбрали " + radioButton.Text); >>
Практическое руководство. Обработка события щелчка элемента управления CheckBox в Windows Forms
Всякий раз, когда пользователь щелкает элемент управления Windows Forms CheckBox, происходит событие Click. Вы можете запрограммировать приложение для выполнения некоторых действий в зависимости от состояния флажка.
Реагирование на нажатия CheckBox
- В обработчике событий Click используйте свойство Checked для определения состояния элемента управления и выполнения любых необходимых действий.
Private Sub CheckBox1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.Click ' The CheckBox control's Text property is changed each time the ' control is clicked, indicating a checked or unchecked state. If CheckBox1.Checked = True Then CheckBox1.Text = "Checked" Else CheckBox1.Text = "Unchecked" End If End Sub private void checkBox1_Click(object sender, System.EventArgs e) < // The CheckBox control's Text property is changed each time the // control is clicked, indicating a checked or unchecked state. if (checkBox1.Checked) < checkBox1.Text = "Checked"; >else < checkBox1.Text = "Unchecked"; >> private: void checkBox1_CheckedChanged(System::Object ^ sender, System::EventArgs ^ e) < if (checkBox1->Checked) < checkBox1->Text = "Checked"; > else < checkBox1->Text = "Unchecked"; > > Примечание. Если пользователь пытается дважды щелкнуть элемент управления CheckBox, каждый щелчок будет обрабатываться отдельно. То есть элемент управления CheckBox не поддерживает событие двойного щелчка.
Примечание. Если свойство AutoCheck имеет значение true (по умолчанию), CheckBox автоматически выбирается или очищается при щелчке. В противном случае необходимо вручную задать свойство Checked при возникновении события Click.
Определение хода действий при нажатии флажка
- Используйте оператор case для запроса значения свойства CheckState, чтобы определить ход действия. Если для свойства ThreeState задано значение true , свойство CheckState может возвращать три возможных значения: установленный флажок, неустановленный флажок и неопределенное состояние, в котором поле затемнено, потому что вариант недоступен.
Private Sub CheckBox1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.Click Select Case CheckBox1.CheckState Case CheckState.Checked ' Code for checked state. Case CheckState.Unchecked ' Code for unchecked state. Case CheckState.Indeterminate ' Code for indeterminate state. End Select End Sub private void checkBox1_Click(object sender, System.EventArgs e) < switch(checkBox1.CheckState) < case CheckState.Checked: // Code for checked state. break; case CheckState.Unchecked: // Code for unchecked state. break; case CheckState.Indeterminate: // Code for indeterminate state. break; >> private: void checkBox1_CheckedChanged(System::Object ^ sender, System::EventArgs ^ e) < switch(checkBox1->CheckState) < case CheckState::Checked: // Code for checked state. break; case CheckState::Unchecked: // Code for unchecked state. break; case CheckState::Indeterminate: // Code for indeterminate state. break; >> Примечание. Если свойству ThreeState присвоено значение true , свойство Checked возвращает true для Checked и Indeterminate.
См. также
- CheckBox
- Общие сведения об элементе управления CheckBox
- Практическое руководство. Задание параметров с помощью элементов управления CheckBox в Windows Forms
- Элемент управления CheckBox
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.
Работа с чекбоксами в JavaScript
Сейчас мы с вами научимся работать с чекбоксами. Чекбокс представляет собой специальную галочку, которая может находится в двух состояниях: отмечено и нет.
Чекбокс создается следующим образом:
Чтобы сделать чекбокс отмеченным — ему нужно написать атрибут checked :
Давайте для примера узнаем состояние нашего чекбокса:
let elem = document.querySelector(‘#elem’); console.log(elem.checked);
Дан чекбокс и две кнопки. По нажатию на первую кнопку установите чекбокс в отмеченное состояние, а по нажатию на вторую — в неотмеченное.
Дан чекбокс, кнопка и абзац. По нажатию на кнопку, если чекбокс отмечен, выведите в абзац слово ‘привет’ , а если чекбокс не отмечен, то слово ‘пока’ .
Чекбокс: что это или как обрабатывать события HTML checkbox
Элемент HTML checkbox позволяет выбрать одно значение в форме. Например, чтобы узнать владеет ли пользователь английским языком, можно добавить чекбокс. Если да, то он устанавливает флажок, если нет — оставляет его пустым.
В этой статье мы рассмотрим:
- Как обрабатывать события onclick и onchange.
- Как обрабатывать события checkbox в JQuery.
- Как отправлять данные формы при установке флажка.
- Как отобразить / скрыть раздел формы при установке флажка чекбокса.
В этом примере мы будем использовать форму, через которую передается имя пользователя. В ней размещен чекбокс, в котором пользователь должен установить флажок, если он свободно владеет английским языком. Если нет, то отображается подсказка с текстом, что для этой вакансии нужен разговорный английский.
Обновлено: 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.
Обратите внимание, что я удалил событие 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.