Html checkbox event javascript

How to handle HTML checkbox events

The HTML checkbox input element allows you to select a single value for submission in a form for example if you are creating a form and want to know if the applicant is fluent in English or not you can have a checkbox and if the user thinks he/she is fluent in English he/she checks it if not leaves it unchecked .

In this tutorial we are going to learn

1. How to handle onclick and onchange events and the difference between them
2. How to handle checkbox events in Jquery
3. How to submit a form when checkbox is clicked
4. Show/ Hide a section of the form when checkbox is clicked

To start working with checkboxes we will create a form that contains a checkbox , in this example we will be building a form that takes a user name and has also a checkbox that the user should check if he thinks he is fluent in English , if not a prompt will appear showing the user a text that says you need to be fluent in English to apply for the job.

form action="">  label for="name">Name:label>  input type="text" name="name">br>  label for="language">Do you speak English fluently?label> input type="checkbox" id="fluency" checked />  form> 

Checkbox event handling using pure Javascript

Now what we need to do is to attach an event to the checkbox so it checks its state each time it’s changed and show the message if it has been unchecked , notice I added a checked property to the checkbox so it is checked by default.

There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.

There is a problem with the onchange event is that it is not called until the checked state has been updated and since Internet Explorer does not fire the onChange event till the checkbox loses focus so it will create different results than in Google chrome and other browsers so to avoid all this I recommend you stick to the onclick event.

input type="checkbox" onclick="checkFluency()" id="fluency" checked /> 

Here I added an on click event and make it so it will call a function called checkFluency() once it is clicked

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

Here in the checkFluency() function , picked the checkbox and then if it is not checked an alert is shown saying “you need to be fluent in English to apply for the job”

Using jQuery

We could have done the same thing using jQuery and in fact, that is what we are going to be doing next . jQuery is the most famous JS library ever created , and a lot of people use it daily as it makes their job a lot easier . You do not need to worry if you do not know jQuery , it’s concepts are very easy and I will be explaining everything as we go along.

I only added jQuery and couple of CSS lines to style our page. I also added the same exact HTML code we used in the previous code , the only difference will be in our javascript code since in this example we will be using jQuery instead of plain javascript.

 form action="">  label for="name">Name:label>  input type="text" name="name">br>  label for="language">Do you speak English fluently?label> input type="checkbox" name="fluency" id="fluency"checked/>  form> 

You may notice that the only thing I changed from the previous example is that I have deleted the onclick event in the checkbox which makes sense , since in jquery we will be attaching the event to the element no need to call it from the HTML code.

Now to the javascript code where all the magic happens :

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

If this seems overwhelming to you , no need to worry , I will be explaining everything in details. First, I am using the $(document).ready(); that I have told you about and inside it I added an anonymous function.

If you are not familiar with anonymous functions they are functions that are declared in runtime and the reason they are called anonymous is that you create them without giving them a name.

And inside the anonymous function I placed the following code :

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

First, we are using the dollar sign ‘$’ which is a shorthand for jQuery so this $(‘#fluency’) is the same exact thing as jQuery(‘#fluency’). Then we are attaching to it an on change event and inside it we are using the anonymous function syntax for the second time. The code that is inside the anonymous function will be run each time the event is fired.

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

This is the same exact if statement we used in the first example with only a very small change , which is instead of getting the checkbox using document.getElementById() we are using the “this” keyword. If you are not familiar with the ’this’ keyword , here in this example it refers to the target that fired that event which is here the checkbox we want to grab.

Submitting the form when checkbox is clicked

Sometimes you might want to submit the form just when the user clicks a checkbox, rather than making the user press the submit button. All what we will have to do is give an id to the form , I gave it an id of myform, then use jQuery to grab and submit the form.

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

Hide/show elements when checkbox is selected

I am sure most of you have seen a lot on the Internet which is when there is something hidden in the form , something like a section for extra information or feedback and you press on a checkbox to toggle it and show it or hide it . And this is what we will be building. We are going to be using jQuery because it will be much easier and shorter and I do not want you to get lost in a lot of lines but this example can be done with only javascript and it will not be hard .

div>  form action="">  input type="text" name="name" placeholder="name">   input type="email" name="email" placeholder="abcd@abcd.com" >  label for="more-info">show more infolabel> input id="more-info" name="more-info" type="checkbox"> div id="conditional_part"> textarea name="message" cols="30" rows="10">textarea>  div>  form>  div> 

In the code above we have a div and inside it we have a form that contains a text with a placeholder text of name which will contain the name of the applicant , another input with type e-mail , checkbox and a textarea . When the checkbox is checked the textarea should appear so by default it should be hidden. So we make the container div (with id conditional_part) hidden

#conditional_part   display:none; > 

Next step is creating the javascript which is going to make this textarea appear and disappear .

The javascript for this example is pretty straight forward :

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

Here, we are first grabbing the checkbox which we gave an id of more-info and attaching to it an onchange event that fires an anonymous function when the event is fired.

Inside this anonymous function we are having the same if statement we used in the previous example to check whether the checkbox is checked or not. And inside them we are using the jquery hide() and show() functions . These functions simply change the display type of the div (with id ‘conditional_part’) .

Источник

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

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

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

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

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

 
Name:  
Do you speak English fluently? 
 

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

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

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

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

Источник

Html checkbox event javascript

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Источник