In this article, we learn how to get checkbox values from the form on submit. During the process, we will implement the following functionalities:
Display all checkbox options on screen.
Allow users to check and uncheck any option
Display checked options on submit.
1. Create checkbox for every option
First, we will add HTML code to display the checkboxes with input type “checkbox”. To ensure that all the checkbox comes under the same input name, “cartitems” name is assigned to every checkbox element.
Once the checkboxes are created, we need to add unique values for each checkbox to differentiate them.
3. Enclose with tag
The tag provides direct access to all the child elements. Hence, once the checkboxes are enclosed by , we will be able to access checkbox values from “document.form[‘user-cart’]“.
Add item to your cart:
4. Button to submit and display the selected checkbox values
HTML Button to allow users to submit the checkbox
container where the selected values are displayed.
The HTML elements can be accessed through JavaScript using “document.getElementById” and forms elements through “document.forms“.
5. JavaScript Function to get the checked values
The handleSubmit function is triggered on a button click using JavaScript events. In the handleSubmit function, we perform the following tasks:
Avoid page refresh using “event.preventDefault()“.
Retrieve list of all checkbox elements using ‘userCart.elements[“cartitems”]‘.
Filter all unchecked elements through the forEach() loop.
Display values of all the checked elements on the screen.
< if (element.checked) < selectedOptions.push(element.value); >>); // Display the selected checkboxes on screen var cartString = selectedOptions.join(", "); displayCart.innerText = `You have selected: $`; >
Final Solution Code
< if (element.checked) < selectedOptions.push(element.value); >>); var cartString = selectedOptions.join(", "); displayCart.innerText = `You have selected: $`; >
В этой статье мы расскажем о input type checkbox HTML , и том, как они обрабатываются в PHP .
Одиночный чекбокс
Создадим простую форму с одним чекбоксом:
В PHP скрипте ( checkbox-form.php ) мы можем получить выбранный вариант из массива $_POST . Если $_POST[‘formWheelchair’] имеет значение » Yes «, то флажок для варианта установлен. Если флажок не был установлен, $_POST[‘formWheelchair’] не будет задан.
Вот пример обработки формы в PHP :
Для $_POST[‘formSubmit’] было установлено значение “ Yes ”, так как это значение задано в атрибуте чекбокса value :
Вместо “ Yes ” вы можете установить значение » 1 » или » on «. Убедитесь, что код проверки в скрипте PHP также обновлен.
Группа че-боксов
Иногда нужно вывести в форме группу связанных PHP input type checkbox . Преимущество группы чекбоксов заключается в том, что пользователь может выбрать несколько вариантов. В отличие от радиокнопки, где из группы может быть выбран только один вариант.
Возьмем приведенный выше пример и на его основе предоставим пользователю список зданий:
Обратите внимание, что input type checkbox имеют одно и то же имя ( formDoor[] ). И что каждое имя оканчивается на [] . Используя одно имя, мы указываем на то, что чекбоксы связаны. С помощью [] мы указываем, что выбранные значения будут доступны для PHP скрипта в виде массива. То есть, $_POST[‘formDoor’] возвращает не одну строку, как в приведенном выше примере; вместо этого возвращается массив, состоящий из всех значений чекбоксов, которые были выбраны.
Например, если я выбрал все варианты, $_POST[‘formDoor’] будет представлять собой массив, состоящий из: . Ниже приводится пример, как вывести значение массива:
Если ни один из вариантов не выбран, $_POST[‘formDoor’] не будет задан, поэтому для проверки этого случая используйте » пустую » функцию. Если значение задано, то мы перебираем массив через цикл с помощью функции count() , которая возвращает размер массива и выводит здания, которые были выбраны.
Если флажок установлен для варианта » Acorn Building «, то массив будет содержать значение ‘ A ‘. Аналогично, если выбран » Carnegie Complex «, массив будет содержать C .
Проверка, выбран ли конкретный вариант
Часто требуется проверить, выбран ли какой-либо конкретный вариант из всех доступных элементов в группе HTML input type checkbox . Вот функция, которая осуществляет такую проверку:
function IsChecked($chkname,$value) < if(!empty($_POST[$chkname])) < foreach($_POST[$chkname] as $chkval) < if($chkval == $value) < return true; >> > return false; >
Чтобы использовать ее, просто вызовите IsChecked ( имя_чекбокса, значение ). Например:
if(IsChecked('formDoor','A')) < //сделать что-то . >//или использовать в расчете . $price += IsChecked('formDoor','A') ? 10 : 0; $price += IsChecked('formDoor','B') ? 20 : 0;
Скачать пример кода
Скачать PHP код примера формы с PHP input type checkbox .
Suppose you have a checkbox in your HTML form like this:
form>Email Address:inputtype="email"name="email">inputtype="checkbox"name="opt_in_newsletter" > Subscribe to the newsletterinput>
If the user checks the option, you will get the following form data
email=name@domain.com opt_in_newsletter=on
However, if the user does not check the option, then the opt_in_newsletter field itself will not be present in the form data that you receive on the server-side.
You might have expected opt_in_newsletter=off But in reality, the behavior is different the W3c recommendation supports this behavior by the way.
You can test this behaviour in the form below. The code below uses the service show.ratufa.io to display the values received on the server side. (note that the action field of the form is set to show.ratufa.io ) If you do not select the checkbox, there will not be any value corresponding to the checkbox in the data received on the server side.
Solutions
One solution is to check for the presence of the value on the server side.
Another alternative is update the form data before sending to the server, using Javascript.
The workaround using hidden fields
In case you want a definite value for each input on the server-side is to use hidden fields along with checkbox. Both fields should have the same name.
Here is the relevant code for better reference:
div>inputtype="hidden"name="send_newsletter"value="no">inputtype="checkbox"name="send_newsletter"id="send_newsletter"value="yes" />labelfor="send_newsletter">Subscribe to the newsletterlabel> div>
If the user selects the option, form data will contain: send_newsletter=yes else, the form data will contain send_newsletter=no
Для обозначения кнопки чекбокса и чтобы input превратился в кнопку, то нужно в input надо поставить тип : type=»checkbox»
Код кнопки checkbox — в отличии от радио, чекбокс после нажатия на неё можно отменить нажатие!
Если используется несколько чекбоксов
Чекбоксы можно выбрать несколько, потом передумать и отключить все, либо наоборот выбрать все чекбоксы!
Получить значение value из type checkbox Input в php
Для полноценного функционирования кнопки type checkbox Input в php нам потребуется создать форму:
Самый простой пример type checkbox Input в php
Нам нужен метод post(), еще нам потребуется input с типом[checkbox ] с атрибутом name и атрибутом value
И последняя кнопка. input с type submit
Чтобы проверить работоспособность кнопки, чекните кнопку радио и нажмите отправить!
Как сделать кнопку checkbox обязательной для нажатия?
Код кнопки checkbox с атрибутом required
Value в кнопке checkbox
Обязательное поле, как и тип – value.
Использование нескольких кнопок checkbox
Как использовать несколько чекбоксов и как получать данные из таких чекбоксов!?
Для такого случая можно пойти двумя путями!
1) Получение значения checkbox в массив
На понадобится несколько чекбоксов, в которых в стандартную запись атрибута name добавляем квадратные скобки
Скрипт для получения значений нескольких чекбоксов
Чтобы проверить работоспособность скрипта по получению нескольких значений из чекбоксов, попробуйте выбрать парочку и нажмите кнопку : Отправить несколько чекбоксов Результат:
2). Получение значения нескольких checkbox
Второй способ банальный, каждому checkbox присвоить уникальное имя(name)и каждый чекбокс обрабатывать индивидуально!
Получить значение value из type checkbox Input в js
Я тут думал о самом простом примере получения value из кнопки checkbox Input!
В чем главная проблема!? В том, что нам нужно:
сделать какое то действие onclick,
потом определить тег(любой id — в смысле уникальный якорь(образно.))
и только уже после этого получить значение из value type checkbox Input.
И первый вариант — это когда кнопка радио 0- одиночная кнопка:
В нашей кнопке в данном случае, обязательное условие id — мы как-то должны обратиться к тегу
Ну и далее повесим на наш id onclick и внутри выведем содержание value чекбокса alert( my_id.value );
Вы можете проверить работоспособность данного получения значения value из type checkbox Input в js
Чекбокс пример получения value
Получить значение нескольких checkbox полей -> js
Получение значений из нескольких чекбоксов инпута в js также просто, как и в php!
Для иллюстрации сбора чекбоксов нам потребуются эти чекбоксы и кнопка в виде ссылки с id:
Скрипт, который соберет вся нажатые чекбоксы( checked )! Обращаю ваще внимание , что внутри скрипта checkbox — это не тип. checkbox — это переменнаямассив(почему такое возможно!? Всё просто : type=checkbox — это из html, а var checkbox из js), они из разных сред смайлы После проверки, если чекбокс был отмечен, заносим данные в переменную( str ) с пробелом, далее выводим результат через alert
to_send. onclick = function()
Для того, чтобы получить сразу несколько позиций checkbox — нажмите кнопку отправить!
Получить значение value из type checkbox Input в переменную php
Для того, чтобы получить значение value в переменную в php, то вам нужно в результата вывода поменять echo на любую переменную и уже там делать все, что вам захочется.
Получить значение value из type checkbox Input в переменную js
Для получения value из type checkbox Input надо поступить аналогично, — вместо alert ставим переменную..
Поисковые запросы о checkbox Input js/php
Иногда поисковые запросы бывают очень интересными.
какой тип данных отдает чекбокс/checkbox Input php?
Начнем с php — конечно же строка, но что я вам так говорю — давайте определим тип по нажатию на кнопку.
Phg: Используем для получения типа gettype
Проверка онлайн типа данных checkbox:
какой тип данных отдает чекбокс/checkbox Input js.
В javascript — тоже, естественно — это будет строка!