Checkbox.checked свойство

Содержание:

Посмотреть результат
Handling checkbox data
Объект переключатель в javascript — radio и свойство checked
How To Create a Custom Radio Button
- Example
Working dynamically with a checkbox
2). Получение значения нескольких checkbox
Состояние «включено» и Unicode-символ «галочка»
How To Create a Custom Checkbox
- - - Step 1) Add HTML:
    - Step 2) Add CSS:
Ещё примеры по кастомизации checkbox и label
Input Checkbox Object Properties
Использование jQuery
Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса
Примеры стилизации флажков с ресурса codepen.io
Вариант №1 проверки чокнутого checkbox
Одиночный чекбокс
- Группа че-боксов
- Проверка, выбран ли конкретный вариант
JavaScript

Посмотреть результат

Создать HTML файл, сделать его разметку, применить форматирование и написать код.

Шаг 1. Создайте HTML файл, сделайте его разметку, примените стили и напишите код JavaScript.

Мы создали файл HTML и сохранили его как checkbox.html:

<html>
<head>
<script>
function check()
{
 var check=document.getElementsByTagName('input');
 for(var i=0;i<check.length;i++)
 {
  if(check.type=='checkbox')
  {
   check.checked=true;
  }
 }
}

function uncheck()
{
 var uncheck=document.getElementsByTagName('input');
 for(var i=0;i<uncheck.length;i++)
 {
  if(uncheck.type=='checkbox')
  {
   uncheck.checked=false;
  }
 }
}
</script>
<style>
body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 background-color:#424242;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:100%;
}
h1
{
 margin-top:50px;
 color:#D8D8D8;
}
h1 p
{
 font-size:14px;
 color:white;
}
input
{
 background:none;
 color:white;
 border:1px solid white;
 width:100px;
 height:50px;
 border-radius:50px;
 margin:10px;
 font-weight:bold;
}
input
{
 width:20px;
 height:20px;
}
td
{
 color:white;
 font-weight:bold;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="Check All" onclick="check();">
<input type="button" value="Uncheck All" onclick="uncheck();">
<table align='center' cellspacing='10'>
 <tr>
  <td><input type="checkbox"></td><td>PHP</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>HTML</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>JavaScript</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>jQuery</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>CSS</td>
 </tr>
 <tr>
  <td><input type="checkbox"></td><td>MySQL</td>
 </tr>
</table>
</div>
</body>
</html>

Мы написали разметку для input type checkbox JavaScript, и создали две кнопки: одна для того, чтобы выбрать все элементы списка, другая – чтобы отменить выбор всех элементов списка. Две функции – check() и uncheck() ставят или убирают галочки всех чекбоксов. Функция check() проверяет, является ли элемент чекбоксом. Если да, она ставит в нем галочку. Функция uncheck() работает точно так же, как и check(), только снимает галочки со всех чекбоксов.

Вот и все, выбирать или снимать все флажки в input type checkbox при помощи JavaScript просто! Вы можете изменять этот код на ваше усмотрение. Пожалуйста, оставляйте комментарии в форме снизу.

Handling checkbox data

Html элементы формы

Checkboxes are a little unwieldy from a data standpoint. Part of this is that there are essentially two different ways to think about their functionality. Frequently, a set of checkboxes represents a single question which the user can answer by selecting any number of possible answers. They are, importantly, not exclusive of each other. (If you want the user to only be able to pick a single option, use radio boxes or the element.)

Check all the languages you have proficiency in.

HTML CSS JS PHP Ruby INTERCAL

The natural way to represent this in you application code (server-side or front-end) is with an array.

However, that isn’t how the browser will send the data. Rather, the browser treats a checkbox as if it is always being used the other way, as a boolean truth value.

I agree to all terms and conditions.

Unlike with radio buttons, a set of checkboxes are not logically tied together in the code. So from HTML’s point of view, each checkbox in a set of checkboxes is essentially on its own. This works perfectly for single-choice boolean value checkboxes, but it presents a little hiccup for arrays of choices. There are two ways to deal with it. You can either give all the checkboxes the same attribute, or you can give each one a different .

If you use the same for all, your request string will look like this: If you use different names, it looks like this: The first one seems a bit preferable, but what happens when you get to PHP and try to get the values?

In PHP, you can make sure that the various identically-named checkboxes are combined into an array on the server by appending a set of square brackets () after the name.

See this PHP forms tutorialfor more information. This array-making syntax is actually a feature of PHP, and not HTML. If you are using a different server side, you may have to do things a little differently. (Thankfully, if you are using something like Rails or Django, you probably will use some form builder classes and not have to worry about the markup as much.)

Объект переключатель в javascript — radio и свойство checked

Css свойство position

Элемент javascript предназначен для выбора только одного единственного варианта из нескольких.

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

Рассмотрим пример использования радиокнопок:
html-код:

<body>
<form name="f1">
Ваш пол:<br>
<input type="radio" name="r1" id="id1">м<br>
<input type="radio" name="r1" id="id2">ж<br>
<input type="button" onclick="fanc()">
<form>
<body>

Группа радиокнопок (radio) идентифицируется в скрипте следующим образом:
Скрипт:

function fanc(){
  document.getElementById("id1").checked=true;    
  document.f1.r1.checked=true;
  document.f1'r1'.checked=true;		
}

Первый способ является наиболее предпочтительным.

Рассмотрим пример использования в javascript с свойством:

Пример: По щелчку на кнопке устанавливать первый переключатель отмеченным

Скрипт:

function fanc(){
	document.f1.r1.checked=true;
}

HTML-код:

<form name="f1">
<input type="radio"   name="r1">пункт1<br>
<input type="radio"   name="r1">пункт1<br>
<input type="button" onClick ="fanc()" value="отметить">
<form>

Задание js12_2.
Создать страницу проверки знаний учащегося с вопросом: «Какой заряд у электрона?» и двумя ответами: «положительный» (неправильный) и «отрицательный» (правильный). Осуществить проверку правильности отмеченного при помощи элемента формы ответа. Функцию проверки запускать

How To Create a Custom Radio Button

Example

Html radio button

/* Customize the label (the container) */.container { display: block;
position: relative; padding-left: 35px; margin-bottom:
12px; cursor: pointer; font-size: 22px; -webkit-user-select:
none; -moz-user-select: none; -ms-user-select: none;
user-select: none;}/* Hide the
browser’s default radio button */.container input { position: absolute;
opacity: 0; cursor: pointer; height: 0; width:
0;
}/* Create a custom radio button */.checkmark { position:
absolute; top: 0; left: 0; height: 25px;
width: 25px; background-color: #eee; border-radius: 50%;
}/* On mouse-over, add a grey background color
*/.container:hover input ~ .checkmark { background-color: #ccc;
}/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark { background-color: #2196F3;
}/* Create the indicator (the dot/circle — hidden when not checked) */.checkmark:after
{ content: «»; position: absolute; display:
none;}/* Show
the indicator (dot/circle) when checked */.container input:checked ~ .checkmark:after
{ display: block;}/* Style the indicator (dot/circle) */
.container .checkmark:after { top: 9px; left: 9px;
width: 8px; height: 8px; border-radius: 50%;
background: white;}

❮ Previous
Next ❯

Working dynamically with a checkbox

Just like any other DOM element, you are able to manipulate a checkbox using JavaScript. In that regard, it could be interesting to check whether a checkbox is checked or not and perhaps add some logic to control how many options a user can select. To show you how this can be done, I have extended a previous example (the «Favorite Pet» selector) to include some JavaScript magic:

Allow me to quickly run through what this code does. We have the same form as before, but we have added an event handler to each of the checkboxes, which causes them to call a JavaScript function (ValidatePetSelection) when the user clicks them. In this function, we get a hold of all the relevant checkboxes using the getElementsByName function and then we loop through them to see if they are checked or not — for each checked item, we add to a number. This number is then checked and if it exceeds two, then we alert the user about the problem (only two pets can be selected) and then we return false. Returning false will prevent the checkbox from being checked.

This was just a simple example of how to work with checkboxes using JavaScript. You can do much more, especially if you use a JavaScript framework like jQuery, which will make it a lot easier to select and manipulate DOM elements.

2). Получение значения нескольких checkbox

Второй способ банальный, каждому checkbox присвоить уникальное имя(name)и каждый чекбокс обрабатывать индивидуально!

Я тут думал о самом простом примере получения value из кнопки checkbox Input!

В чем главная проблема!? В том, что нам нужно:

1). сделать какое то действие onclick, 2). потом определить тег(любой id — в смысле уникальный якорь(образно.))3). и только уже после этого получить значение из value type checkbox Input4). И первый вариант — это когда кнопка радио 0- одиночная кнопка:

В нашей кнопке в данном случае, обязательное условие id — мы как-то должны обратиться к тегу

<input type=»checkbox» id=»my_id» value=»my_id_value»>Чекбокс пример получения value<br>
Ну и далее повесим на наш id onclick и внутри выведем содержание value чекбокса alert( my_id.value );

my_id.onclick = function(){

alert( my_id.value );

};

</script>

Вы можете проверить работоспособность данного получения значения value из type checkbox Input в js

Чекбокс пример получения value

Получение значений из нескольких чекбоксов инпута в js также просто, как и в php!

Для иллюстрации сбора чекбоксов нам потребуются эти чекбоксы и кнопка в виде ссылки с id:

<input type=»checkbox» value=»red» name=»co»>Красный

<input type=»checkbox» value=»green» name=»co»>Зеленый

<input type=»checkbox» value=»blue» name=»co»>Синий

<a id=»to_send»>отправить</a>

Скрипт, который соберет вся нажатые чекбоксы(checked)! Обращаю ваще внимание, что внутри скрипта checkbox — это не тип… checkbox — это переменная(массив)(почему такое возможно!? Всё просто : type=checkbox — это из html, а var checkbox из js), они из разных сред. После проверки, если чекбокс был отмечен, заносим данные в переменную(str) с пробелом, далее выводим результат через alert

После проверки, если чекбокс был отмечен, заносим данные в переменную(str) с пробелом, далее выводим результат через alert

window.onload = function() {

var checkbox;

to_send. onclick = function()

{

checkbox = document.getElementsByName(«co»);

var str = «»;

for(var i=0; i<checkbox.length; i++){

if(checkbox . checked) {str+=checkbox.value+» «;}

}

alert(str);

}

</script>

Для того, чтобы получить сразу несколько позиций checkbox — нажмите кнопку отправить!

Красный Зеленый Синий отправить

Для того, чтобы получить значение value в переменную в php? то вам нужно в результата вывода поменять echo на любую переменную и уже там делать все, что вам захочется…

if( $_POST ) { $здесь_переменная = strip_tags($_POST);}

Состояние «включено» и Unicode-символ «галочка»

Отмеченный переключатель, очевидно, имеет некоторые отличия. Для нас это не проблема, потому что с помощью соседнего селектора можно обращаться не только к самому элементу, но и к его ::before:

inputtype=checkbox:checked + .pseudocheckbox::before { … }

Отмеченный переключатель обычно имеет внутри «галочку». Здесь нам на помощь приходит разнообразие символов Unicode, которое выходят далеко за пределы собственно букв и цифр. Есть среди этого многообразия и несколько значков для «галочки». Код значка мы запишем в свойство content:

inputtype=checkbox:checked + .pseudocheckbox::before { content: «\2714»; }

В результате «галочка» будет вписана во все «квадратики» рядом с отмеченными чекбоксами, чего мы и добивалсь. Однако, не стоит забывать, что технически такая «галочка» — это обычный текстовый символ, который самостоятельно может и не выглядеть ровно так, как надо, и ему нужно ему в этом немного помочь.

Центрируем по горизонтали:

text-align: center;

В разных шрифтах символ «галочки» может выглядеть немного по-разному, поэтому для ясности выбираем какой-то один и указываем его явно. Также подбираем размер:

font-family: Arial, sans-serif;font-size: 16px;

Кроме размера нужно добиться необходимого положения символа внутри квадратика по вертикальной оси. Лучше всего это делать с помощью line-height:

line-height: 16px;

line-height нужно подбирать индивидуально для каждого сочетания размера и семейства шрифта.

При выравнивании по базовой линии текста (vertical-align: baseline) именно значение line-height определеяет, где, собственно, будет нижняя граница текста у «квадратика». Если эти значения у отмеченного и неотмеченного будут отличаться, то они окажутся выровненными по-разному (так может получиться, например, если явно указать line-height только у отмеченного). Поэтому line-height лучше указывать в общем блоке стилей для ::before.

line-height обычно подбирают вместе с font-size, поэтому его удобно иметь в блоке стилей рядом. font-size, в свою очередь, может подбираться вместе с другими параметрами текста. Так что все их удобней перенести в общий блок для ::before, хотя, на первый взгляд, правила стилизации текста там выглядит нелогично, т.к. самого текста там нет.

Напоследок добавим жирность и укажем цвет:

font-weight: bold;color: #808080;

Все права на данную статью принадлежат порталу webew.ru.
Перепечатка в интернет-изданиях разрешается только с указанием автора
и прямой ссылки на оригинальную статью. Перепечатка в печатных
изданиях допускается только с разрешения редакции.

How To Create a Custom Checkbox

Step 1) Add HTML:

<label class=»container»>One <input type=»checkbox»
checked=»checked»> <span class=»checkmark»></span></label><label class=»container»>Two <input type=»checkbox»>
<span class=»checkmark»></span></label>
<label class=»container»>Three <input type=»checkbox»>
<span class=»checkmark»></span></label><label class=»container»>Four
<input type=»checkbox»> <span class=»checkmark»></span></label>

Step 2) Add CSS:

/* Customize the label (the container) */.container { display: block;
position: relative; padding-left: 35px; margin-bottom:
12px; cursor: pointer; font-size: 22px; -webkit-user-select:
none; -moz-user-select: none; -ms-user-select: none;
user-select: none;}/* Hide the
browser’s default checkbox */.container input { position: absolute;
opacity: 0; cursor: pointer; height: 0; width:
0;
}/* Create a custom checkbox */.checkmark { position:
absolute; top: 0; left: 0; height: 25px;
width: 25px; background-color: #eee;}/* On mouse-over, add a grey background color */.container:hover
input ~ .checkmark { background-color: #ccc;}/* When the
checkbox is checked, add a blue background */.container input:checked ~
.checkmark { background-color: #2196F3;}/* Create the
checkmark/indicator (hidden when not checked) */.checkmark:after {
content: «»; position: absolute; display: none;}/* Show the
checkmark when checked */.container input:checked ~ .checkmark:after {
display: block;}/* Style the checkmark/indicator */.container
.checkmark:after { left: 9px; top: 5px; width:
5px; height: 10px; border: solid white;
border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg); transform: rotate(45deg);}

Ещё примеры по кастомизации checkbox и label

В этом разделе представлены следующие примеры:

1. Стилизация checkbox, когда расположен в .

HTML разметка:

<label class="custom-checkbox">
  <input type="checkbox" value="value-1">
  <span>Indigo</span>
</label>

CSS код:

/* для элемента input c type="checkbox" */
.custom-checkbox>input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

/* для элемента label, связанного с .custom-checkbox */
.custom-checkbox>span {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

/* создание в label псевдоэлемента before со следующими стилями */
.custom-checkbox>span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

/* стили при наведении курсора на checkbox */
.custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before {
  border-color: #b3d7ff;
}

/* стили для активного чекбокса (при нажатии на него) */
.custom-checkbox>input:not(:disabled):active+span::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

/* стили для чекбокса, находящегося в фокусе */
.custom-checkbox>input:focus+span::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-checkbox>input:focus:not(:checked)+span::before {
  border-color: #80bdff;
}

/* стили для чекбокса, находящегося в состоянии checked */
.custom-checkbox>input:checked+span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/* стили для чекбокса, находящегося в состоянии disabled */
.custom-checkbox>input:disabled+span::before {
  background-color: #e9ecef;
}

2. Стилизация , когда расположен в .

HTML разметка:

<label class="custom-radio">
  <input type="radio" name="color" value="indigo">
  <span>Indigo</span>
</label>

CSS код:

/* для элемента input c type="radio" */
.custom-radio>input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

/* для элемента label связанного с .custom-radio */
.custom-radio>span {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

/* создание в label псевдоэлемента  before со следующими стилями */
.custom-radio>span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 50%;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

/* стили при наведении курсора на радио */
.custom-radio>input:not(:disabled):not(:checked)+span:hover::before {
  border-color: #b3d7ff;
}

/* стили для активной радиокнопки (при нажатии на неё) */
.custom-radio>input:not(:disabled):active+span::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

/* стили для радиокнопки, находящейся в фокусе */
.custom-radio>input:focus+span::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.custom-radio>input:focus:not(:checked)+span::before {
  border-color: #80bdff;
}

/* стили для радиокнопки, находящейся в состоянии checked */
.custom-radio>input:checked+span::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* стили для радиокнопки, находящейся в состоянии disabled */
.custom-radio>input:disabled+span::before {
  background-color: #e9ecef;
}

Input Checkbox Object Properties

Property	Description
autofocus	Sets or returns whether a checkbox should automatically get focus when the page loads
checked	Sets or returns the checked state of a checkbox
defaultChecked	Returns the default value of the checked attribute
defaultValue	Sets or returns the default value of a checkbox
disabled	Sets or returns whether a checkbox is disabled, or not
form	Returns a reference to the form that contains the checkbox
indeterminate	Sets or returns the indeterminate state of the checkbox
name	Sets or returns the value of the name attribute of a checkbox
required	Sets or returns whether the checkbox must be checked before submitting a form
type	Returns which type of form element the checkbox is
value	Sets or returns the value of the value attribute of a checkbox

Использование jQuery

То же самое можно реализовать с помощью jQuery. В коде примера я подключил jQuery и добавил пару строк CSS для стилизации страницы.

Я также добавил HTML, который мы использовали в предыдущем разделе. В этом примере мы будем использовать jQuery вместо JavaScript.

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

Обратите внимание, что я удалил событие 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)
{
     alert('you need to be fluent in English to apply for the job');
}

Это то же самое, что и оператор if, который мы применяли в первом примере. Только вместо document.getElementById() мы используем ключевое слово this. Оно указывает на элемент, который вызовет события. В данном примере это checkbox.

Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса

В этом примере мы используем для jQuery input checkbox checked событие change. Когда ставится или убирается галочка, исполняется соответствующий код.

В демо, ссылка на который приведена ниже, мы скрываем элемент div, содержащий веб-форму. Форма сделана при помощи встроенных классов Bootstrap, поэтому вместе со ссылкой на библиотеку jQuery в разделе <head> также указан CSS-файл Bootstrap.

Отметьте или уберите галочку с чекбокса, чтобы скрыть или показать веб-форму. Для этого используются методы $.show и $.hide:

Посмотреть демо и код онлайн

Полный код примера:

<!DOCTYPE html>
 
<html>
 
<head>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
 <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
<script>
 
$(document).ready(function() {
 
$("#demochecked").change(function() {
 
    if(this.checked) {
 
       $("#chkboxdemo").show();
 
    }
 
    else
 
    {
 
       $("#chkboxdemo").hide();
 
    }
 
})
 
});
 
</script>
 
<style>
 
.divcls
 
{
 
width:auto;
 
height: auto;
 
padding:20px;
 
background-color:#4D9999;
 
color:#fff;
 
font-size:15px;
 
}
 
</style>
 
</head>
 
<body>
 
<div class="divcls"><p>jQuery checkbox check/uncheck demo with a form</p>
 
<input type="checkbox" checked id="demochecked"/>Create Account? Yes / No
 
</div>
 
<div class="container" id="chkboxdemo">
 
<h1>Fill in the form below for creating account</h1>
 
    <form class="form-horizontal" role="form">
 
      <div class="form-group">
 
        <label for="name1" class="col-sm-2 control-label">First Name:</label>
 
        <div class="col-sm-4">
 
          <input type="text" class="form-control" name="fname" placeholder="Your First Name">
 
        </div>
 
      </div>
 
      <div class="form-group">
 
        <label for="name1" class="col-sm-2 control-label">Last Name:</label>
 
        <div class="col-sm-4">
 
          <input type="text" class="form-control" name="lname" placeholder="Your Last Name">
 
        </div>
 
      </div>     
 
      <div class="form-group">
 
        <label for="gender1" class="col-sm-2 control-label">Gender:</label>
 
        <div class="col-sm-2">
 
        <select class="form-control" name="ygender">
 
          <option>Male</option>
 
          <option>Female</option>
 
        </select>         
 
        </div>
 
      </div>     
 
      <div class="form-group">
 
        <label for="email1" class="col-sm-2 control-label">Your Email:</label>
 
        <div class="col-sm-5">
 
          <input type="email" class="form-control" name="yemail" placeholder="Enter Email address">
 
        </div>
 
      </div>
 
      <div class="form-group">
 
        <label for="password1" class="col-sm-2 control-label">Password:</label>
 
        <div class="col-sm-3">
 
          <input type="password" class="form-control" name="ypassword" placeholder="(Must be 8 characters long)">
 
        </div>
 
      </div>
 
      <div class="form-group">
 
        <label for="address1" class="col-sm-2 control-label">Address:</label>
 
        <div class="col-sm-5">
 
          <input type="text" class="form-control" name="postaddress" placeholder="Where do you live?">
 
        </div>
 
      </div>           
 
        <div class="col-sm-offset-2 col-sm-5">  
 
        <p><input type="submit" class="btn btn-lg btn-block btn-success" value="Create My Account"></p>
 
        </div>
 
   </div>
 
     </form>
 
</body>
 
</html>

Обратите внимание, как происходит jQuery checkbox checked проверка, и реализуются условия if/else для показа или скрытия формы

Примеры стилизации флажков с ресурса codepen.io

Как работает стилизация

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

See the Pen Delightful Checkbox Animation by Dylan Raga (@dylanraga) on CodePen.18892

Близкие к стандартным варианты флажков, переключателей и выпадающих списков от Kenan Yusuf

See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.18892

Подсветка текста label + анимация выбора чекбокса от Adam Quinlan

Перекатывающийся шарик от Jon Kantner

Вариант 1

See the Pen Toy Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2 со скрепкой

See the Pen Paper Clip Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Карандаш для отметки выбора флажка

Еще один вариант анимации от Jon Kantner, но с появлением карандаша. Отличное решение для тестов, например.

See the Pen Pencil and Paper Checkboxes by Jon Kantner (@jkantner) on CodePen.18892

Меняем цветовую схему переключателем

Автор Jon Kantner предлагает вашему вниманию вариант кода, при котором клик на чекбоксе меняет цвет фона.

Вариант 1

See the Pen Toggle Switch with Rolling Label by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Light/Dark Mode Toggle With Curtain Effect by Jon Kantner (@jkantner) on CodePen.18892

Вариант №1 проверки чокнутого checkbox

Нам потребуется тег input с уникальным идентификатором(id) и еще кнопка по которой мы будем нажимать!

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»ссылка»>Условиями</a></i>
<button id=»submit»>Создать аккаунт</button>

Далее нам понадобится скрипт, который сможет определить, msk kb накат чекбокс или нет:

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

Теперь нам понадобится onclick, для отслеживания нажатия на кнопку! И соберем весь код вместе:

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>

<button id=»submit»>Создать аккаунт</button>

submit.onclick = function(){

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

}

</script>

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

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

<form action="checkbox-form.php" method="post">
    Do you need wheelchair access?
    <input type="checkbox" name="formWheelchair" value="Yes" />
    <input type="submit" name="formSubmit" value="Submit" />
</form>

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

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

<?php

if(isset($_POST) && 
   $_POST == 'Yes') 
{
    echo "Need wheelchair access.";
}
else
{
    echo "Do not Need wheelchair access.";
}

?>

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

<input type="checkbox" name="formWheelchair" value="Yes" />

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

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

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

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

<form action="checkbox-form.php" method="post">

Which buildings do you want access to?<br />
<input type="checkbox" name="formDoor[]" value="A" />Acorn Building<br />
<input type="checkbox" name="formDoor[]" value="B" />Brown Hall<br />
<input type="checkbox" name="formDoor[]" value="C" />Carnegie Complex<br />
<input type="checkbox" name="formDoor[]" value="D" />Drake Commons<br />
<input type="checkbox" name="formDoor[]" value="E" />Elliot House

<input type="submit" name="formSubmit" value="Submit" />

</form>

Обратите внимание, что input type checkbox имеют одно и то же имя (formDoor[]). И что каждое имя оканчивается на []

Используя одно имя, мы указываем на то, что чекбоксы связаны. С помощью [] мы указываем, что выбранные значения будут доступны для PHP скрипта в виде массива. То есть, $_POST возвращает не одну строку, как в приведенном выше примере; вместо этого возвращается массив, состоящий из всех значений чекбоксов, которые были выбраны.

Например, если я выбрал все варианты, $_POST будет представлять собой массив, состоящий из: {A, B, C, D, E}. Ниже приводится пример, как вывести значение массива:

<?php
  $aDoor = $_POST;
  if(empty($aDoor)) 
  {
    echo("Вы не выбрали ни одного здания.");
  } 
  else
  {
    $N = count($aDoor);

    echo("Вы выбрали $N здание(й): ");
    for($i=0; $i < $N; $i++)
    {
      echo($aDoor . " ");
    }
  }
?>

Если ни один из вариантов не выбран, $_POST не будет задан, поэтому для проверки этого случая используйте «пустую» функцию. Если значение задано, то мы перебираем массив через цикл с помощью функции count(), которая возвращает размер массива и выводит здания, которые были выбраны.

Если флажок установлен для варианта «Acorn Building«, то массив будет содержать значение ‘A‘. Аналогично, если выбран «Carnegie Complex«, массив будет содержать C.

Проверка, выбран ли конкретный вариант

Часто требуется проверить, выбран ли какой-либо конкретный вариант из всех доступных элементов в группе HTML input type checkbox. Вот функция, которая осуществляет такую проверку:

function IsChecked($chkname,$value)
    {
        if(!empty($_POST))
        {
            foreach($_POST 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;

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()