Array in checkbox html

Обработка чекбоксов в PHP

В этой статье мы расскажем о input type checkbox HTML , и том, как они обрабатываются в PHP .

Одиночный чекбокс

Создадим простую форму с одним чекбоксом:

 
Do you need wheelchair access?  

В PHP скрипте ( checkbox-form.php ) мы можем получить выбранный вариант из массива $_POST . Если $_POST[‘formWheelchair’] имеет значение » Yes «, то флажок для варианта установлен. Если флажок не был установлен, $_POST[‘formWheelchair’] не будет задан.

Вот пример обработки формы в PHP :

Для $_POST[‘formSubmit’] было установлено значение “ Yes ”, так как это значение задано в атрибуте чекбокса value :

Вместо “ Yes ” вы можете установить значение » 1 » или » on «. Убедитесь, что код проверки в скрипте PHP также обновлен.

Группа че-боксов

Иногда нужно вывести в форме группу связанных PHP input type checkbox . Преимущество группы чекбоксов заключается в том, что пользователь может выбрать несколько вариантов. В отличие от радиокнопки, где из группы может быть выбран только один вариант.

Возьмем приведенный выше пример и на его основе предоставим пользователю список зданий:

 
Which buildings do you want access to? 
Acorn Building 
Brown Hall 
Carnegie Complex 
Drake Commons 
Elliot House 

Обратите внимание, что 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 .

Источник

Some PHP Tips and ‘Tricks’

This is more how to write the HTML and Javascript, whilst still being able to return an array of items to the same/next PHP script.

Often search results get displayed as tables of short form information and the user can select one item to drill down for more details or choose several to compare or drill down for more details at the same time. Examples of this would be on a shopping site comparing several items in a category or on a job site selecting some of the vacancies in a search result.

Also you want to check that at least a certain number have been selected using Javascript before posting the form details.

Now the normal way to start this is to have a CHECKBOX for each item, but has a value of the identification number in the list as follows —

Now due to the fact that it is easier in PHP decode POST results, as an array, which is easier to perform in HTML as

Then the POST variable $_POST[ ‘box’ ] contains an array of identification numbers, as PHP gathers all ‘box[]’ values together, in the same way as a PHP line like

Would add ‘x’ as the next item in the array. Hence the array returned in the POST variables is already an array which can be easily manipulated or scanned for checks or further database search queries. See MySQL queries using WHERE IN <. >and use of PHP implode function to faciltate this to a simple WHERE clause to scan a list of values by —

WHERE box IN (‘».implode( «‘, ‘», $box ).»‘)

The trouble really starts when you also need some Javascript Buttons, so that this HTML table containing a column with CHECKBOXes can have shortcut functions to Clear All or Select All CHECKBOXes. To do this in Javascript it is usally done by having all the CHECKBOXes having the ‘name’ attribute being the same

As Javascript will create this into an array for Javascript usage and mess up the PHP array functions. The easiest way around this is to do two things

Add the ‘id=’ attribute to each CHECKBOX
Use the method of By Ids to reference the array of HTML checkbox ids.

So our generated HTML becomes

If we now add buttons to Select ALL and Clear ALL to call a function CHECK or UNCHECK all the boxes respectively, whilst adding a check function to the Submit button, we end up with these SHORT Javascript functions to include as a Javascript File or inline scripts as follows —

function checkform( thisid, min ) < var loop, i = 0; for( loop = 0; loop < thisid.length; loop++ ) if( thisid[ loop ].checked == true ) i++; if( i < min) < alert( "At least "+min+" item(s) must be selected\n" +"(by a tick in Select column)\n In order to proceed" ); return false; >return true; > function select_all( thisid, val )

See the include file ‘checkform.js’ for full comments. This method is portable as the id is passed in so can be called for various forms or sections of forms.

Then the buttons can simply be created by HTML lines of

The parameters passed are — check the name of the HTML/Javascript id array, whilst true sets all CHECKBOXes to CHECKED value and false clears all CHECKBOXes to UNCHECKED.

To see an example in action go to the next page — Example Array

Источник

How to store selected checkbox value in array in JavaScript

In this article, you will learn how to store selected checkbox value in array using JavaScript or how to get multiple checkbox value in JavaScript .

Store all selected checkbox value in array using for loop.

In the first example, I will show you the example by using javascript for loop.

Example using for loop

function myFunc() < let arr = []; let checkboxes = document.querySelectorAll("input[type='checkbox']:checked"); for (let i = 0 ; i < checkboxes.length; i++) < arr.push(checkboxes[i].value) > >

1. When the Store Value button is clicked, the myFunc() function gets called.
2. Inside this function, create a new blank array ( let arr = [] ). Then, store the selected checkbox into a variable using querySelectorAll() method.

The querySelector() method returns the first element that matches the specified selectors. But querySelectorAll() method returns all the elements that matches the specified selectors as a NodeList representing a list of the selected elements .

Store selected checkbox values in array using forEach() method.

Use the forEach() method to store all selected checkbox values in an array. The example is given below.

script> function myFunc() < let arr = []; let checkboxes = document.querySelectorAll("input[type='checkbox']:checked"); checkboxes.forEach((item)=>< arr.push(item.value) >) console.log(arr); > /script>

How to store selected checkbox value in array in JavaScript

In this article, you will learn how to store selected checkbox value in array using JavaScript or how to get multiple checkbox value in JavaScript . S…

In this article, you will learn how to store selected checkbox value in array using JavaS…

3 Answers

Select checkboxes and click on the submit button and check out the console.
https://www.3schools.in/p/code-editor.html?q=CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDEiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDIiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDMiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDQiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDUiIC8+CjxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9InZhbHVlIDYiIC8+Cgo8YnV0dG9uIG9uY2xpY2s9Im15RnVuYygpIj4gU3VibWl0PC9idXR0b24+CjxzY3JpcHQ+CmZ1bmN0aW9uIG15RnVuYygpIHsKIGxldCBhcnIgPSBbXTsKIGxldCBjaGVja2JveGVzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiaW5wdXRbdHlwZT0nY2hlY2tib3gnXTpjaGVja2VkIik7CgpjaGVja2JveGVzLmZvckVhY2goKGl0ZW0pPT57CiAgIGFyci5wdXNoKGl0ZW0udmFsdWUpCn0pIAoKY29uc29sZS5sb2coYXJyKTsKfQo8L3NjcmlwdD4=

To store selected checkbox values in an array in pure JavaScript, you can use the forEach() method. This method will iterate through all the checkboxes and add the value of each selected checkbox to the array. Here is an example of how to use it:
let myArray = [];
let checkboxes = document.querySelectorAll(‘input[type=»checkbox»]’);
checkboxes.forEach(function(checkbox)
if (checkbox.checked)
myArray.push(checkbox.value);
>
>);
In this example, the variable myArray will contain an array of all the selected checkbox values. You can then use this array in your code as needed.

 Array ( [0] => 1 [1] => 2 ) [submit] => Submit Query )

 Array ( [43] => 1 [23] => 2 ) [submit] => Submit Query )