Input type radio name

Содержание

Атрибут checked="checked"

Делает чекбокс [type="checkbox"] или радиокнопку [type="radio"] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.

Атрибут checked="checked" можно вызывать с помощью label

Если нажать на содержимое label, то сработает input (будет активным или нет).

описание описание1 описание2

input не обязательно должен располагаться внутри label.

описание описание1 описание2

Атрибут checked="checked" можно вызывать с помощью нескольких label

Кнопка будет срабатывать вне зависимости от того, на какой label я нажму и вне зависимости от расстояния между тегами label и input.

описание2 описание1 описание11 описание21 описание12 описание22

Псевдокласс :checked

С помощью CSS можно прописать что будет происходить с другими нижестоящими элементами, когда кнопка нажата. Когда кнопка отжата, элементы будут возвращаться к исходному состоянию. Чтобы всё без проволочек было, нужно хорошо разбираться в селекторах.

Вот несколько вещей, которые можно сделать только на CSS

  1. Tab-меню
  2. Слайдеры, галереи: 1, 2, 3
  3. Accordion
  4. Модальное окно
  5. Спойлер
  6. Пока флажок не установлен, по ссылке пройти нельзя:

Я ознакомлен и принимаю условия договора
ссылка, ну-ка, нажмите на меня

:checked и селекторы в Google Chrome

Красивые чекбоксы-переключатели «ВЫКЛ ВКЛ». Как задать свой стиль checkbox

Я предпочитаю стандартный вид input, но к этому, этому и этому не осталась равнодушна и приложила свою руку к оформлению и стилизации checkbox. Можно убирать саму кнопку и задать свой стиль :before у label.

Проверка чекбокса на включение/отключение

Большинство вещей не решить только CSS. Нужно подключать JavaScript. Иногда нужно так Если группа Или так Или так . alert появляется по нарастающей. Если одна галочка, то одно сообщение, если три галочки, то три сообщения.

Проверить все ли чекбоксы помечены

Установить checked в checkbox

Установить checked в radio

Выделить все checkbox одним нажатием кнопки

Задача:

  1. если отметить все checkbox, то будет отмечен и главный,
  2. если снять checked хотя бы с одного checkbox группы, то будет снят checked и с общего чекбокса,
  3. если будет поставлена/убрана галочка с основного чекбокса, то автоматом будут убраны/установлены все флажки второстепенных checkbox.

Решение я нашла тут. Check all

Ограничить область действия функции JavaScript. Функция исполняется только внутри конкретного тега

Если нужно несколько fieldset, то узнаём его порядковый номер при наведении на него курсора мышки и исполняем функции, если он имеет класс shest1.

Первая форма: Вторая форма:

Но лучше с помощью nextElementSibling, previousElementSibling, parentNode. См. код дерева.

Дерево из checkbox

Задача:

  1. если хотя бы один чекбокс прямого потомка выделен, то родитель помечен :indeterminate,
  2. если все чекбоксы прямого потомка выделены, то родитель помечен галочкой :checked,
  3. родитель отвечает за снятие/установку галочек всех дочерних чекбоксов,
  4. семантический код,
  5. у дерева может быть неограниченное число уровней, но скрипт и CSS при этом не увеличиваются.

Что не удалось:

  1. если кликнуть по 2, а потом снять галку с 2.1.1, то у 2 и 2.1 будет :indeterminate. Всё верно. Но, если затем нажать на 2, то у 2.1 :indeterminate должно поменяться на :checked, а этого не происходит.

Вот до такой удачной реализации (мало кода для столь объёмного элемента) я дошла путём проб и ошибок. Именно поэтому здесь выложено больше, чем нужно. Это варианты, которые я прорабатывала.

Как сделать полноценное дерево из checkbox

Если дерево большое, то вложенные пункты лучше прятать. В стилях предыдущей реализации в комментариях к коду CSS показано как. Минус того метода: нажмёшь 2, а потом убираешь галочки с 2.2, 2.3, 2.4 чтобы осталась галка только на 2.1. Поэтому рядом нужно поставить плюс/минус. Здесь совсем не заметен недостаток, озвученный выше.

  1. плюсик и минус работают только если ни один из потомков не выделен,
  2. если убрать выделение со всех пунктов, то список скроется, у родителя не будет checked,
  3. если поставить флажок на родителя, то будут выделены все потомки, но показаны только дочерние.
  4. если убрать флажок с родителя, то и потомки не будут выделены, кроме того они будут скрыты.
  5. доработав код, можно чтобы при переходе по разным ссылкам, расположенных, скажем, на разных страницах, на страницу дерева с чекбоксами, раскрывалось дерево на нужном уровне, помечались требуемые чебоксы галочками.

Деактивировать все флажки, кроме нескольких отмеченных

Как задать максимально возможное число чекбоксов, на которые можно установить галки? То есть дать выбрать только 3 любых чекбокса из 5 возможных. Свой выбор можно менять.

Я, конечно, понимаю, что запись странновата, только вот .querySelectorAll(‘[type="checkbox"]:not([checked])’) работает только для изначально установленных флажков.

Как посчитать сумму значений value у выбранных чекбоксов

80 комментариев:

Rusylev как всегда на высоте! Великолепная статья, спасибо. NMitra Спасибо )) Анонимный Спасибо) Анонимный Потрясающе!Отлично все сделано) все четко, и доступно!Спасибо. NMitra Благодарю, приятно слышать ) Анонимный Круто ,всё круто с: ,спасибо Misha B классно, спасибо, очень познавательно
а как сделать так что бы только при отмечании галочкой была возможность перейти на следующую старницу.
пример лицензионное соглашение — только при отмечании была возможность перейти на определённый URL , в если не было отмеченно и попытаться перейти по URL то выскакивало окно как в "Проверка чекбокса на включение/отключение"
зарание спасибо NMitra Хм, это и на CSS можно сделать. Ребёнок заболел. Наверно в понедельник/вторник выложу свой вариант, обновлю эту статью.. Misha B Желаю здоровья вашему ребёнку и вам. не проблема подождём, лижбы у вас было всё в порядке NMitra Спасибо, пошли на поправку, см. http://shpargalkablog.ru/2013/08/checked.html#linkDa Штиф Васлер Вот это статья, просто perfect! Благодарю за очередной урок css магии 😉 Анонимный Здравствуйте. Очень хорошая статья. Есть ли что-то подобное не только про checkbox, но и про radio. Если быть точнее, то возникла проблема — есть таблица, в которой имеется 4 столбца и какое-то бесконечное количество строк. В каждой строке по 4 инпута с типом radio, т.е. пользователь для каждой строки может выбрать только один вариант. Но вот как сделать, чтобы в каждом столбце был как бы общий radio, который выделяет сразу все radio именно в его столбце и при этом сам выделяется. В общем я всё это реализовал, вот только общий radio сам остаётся не выделенным. Осталось совсем маленько, не знаю как добить уже. Помогите, пожалуйста. NMitra Здравствуйте, по мне, так не очень удачная идея. В группе radio хоть один элемент да должен быть активным:

Читайте также:  Avaya 6416d m инструкция на русском

Анонимный Спасибо Анонимный Админ большое спасибо! Очень помогло. NMitra На здоровье! Анонимный Спасибо большое, статья очень помогла Николай Зуев круто слов нет. только вот почему не написано как работать с пхп? NMitra Потому что с PHP я знакома постольку-поскольку. Анонимный Wow/ Автор-молодецц-такая работа- нашел что искал- группа чекбоксов с одной кнопкой. Спасибо Анонимный добрый день помогите решить задачу
нужно сделать окно над которым будут радио баттоны нажимая на которые, один текст сменяется другим в зависимости от нажатого радио баттона. радио баттоны подписаны 1,2,3.
!но при этом нажимая на радиобаттоны менялась и картинка в хедере!
https://yadi.sk/i/-DjMU_yQWPzhN NMitra Добрый день. Я бы делала JavaScript-ом. Не совсем понимаю как вам помочь. Это нужно знать как минимум ваши селекторы. И такая работа, как правило, оплачивается. Извините. Анонимный как заставить чекбоксы работать в гугл хром? NMitra У меня в браузере все примеры выше работают. У вас не так? Анонимный а есть ли возможность по нажатии на чекбокс сдлеть редактируемыми/(не редактируемыми) текстовые поля, находящиеся на этой же странице? NMitra Легко, только input-ы должны иметь одного родителя

Соколов Игорь профессионально, доступно, большая благодарность NMitra Спасибо за комментарий, Игорь! Анонимный Спасибо! А вот еще простое дерево на CSS
http://jsfiddle.net/NZaw4/1/ NMitra Благодарю за пример, он будет полезен читателям! Посмотрите и тег details (html5) http://jsfiddle.net/NMitra/gfuon23b/2/ ( http://shpargalkablog.ru/2013/04/details-html.html ) для Хрома Анонимный Провел всю ночь в шпаргалке блоггера, так и не удалось добиться результата на основе примеров, которые вы привели.
Я буду очень благодарен, если подскажете:

Имеею таблицу. Строку из 5 ячеек. в 1-ых трех ячейках стоят type-radio.
Как добиться, чтобы при выборе 1 (прозрачный цвет), 2(красный цвет), 3(синий цвет) radio цвет ячеек 4 и 5 соответственно изменялся?

С таблицей целиком получается, а отдельно с TD ячейкой не хочет работать. NMitra Здравствуйте. Проблема или с селекторами или с перебором http://shpargalkablog.ru/2013/10/for-javascript.html

var c = document.querySelectorAll(‘input’);
for (var i = 0; i Максим Бойко Работает. Сложность осталась в следующем. На странице имеется целый список из таких строк. В каждой строке присутствует минимум 2 radio элемента. Этот скрипт, понятное дело, меняет цвет во всех td ячейках. Требуется чтобы каждая строка по отдельности меняла цвет. Прошу помощи. У меня есть нынешний скрипт, который работает, но меняет строку tr целиком.

—>

jQuery(document).ready(function() <
jQuery("input[value=’нет’]").click(function () <
var name_input = jQuery(this).attr("name");
jQuery("." + name_input).css("background","#fff");
>)
jQuery("input[value=’обычные’]").click(function () <
var name_input = jQuery(this).attr("name");
jQuery("." + name_input).css("background","#acacf9");
>)
jQuery("input[value=’опасные’]").click(function () <
var name_input = jQuery(this).attr("name");
jQuery("." + name_input).css("background","#ff9494");
>)
>);

За ранее благодарен за помощь. NMitra Так? http://jsfiddle.net/NMitra/veh95qdf/1/

червертая пятая
третья червертая пятая

FOMUVI Здравствуйте. Можно ли добиться для кнопки radio эффект "Я ознакомлен и принимаю условия договора"?
Вот моя таблица: http://i.imgur.com/gfxTqiG.jpg
Форма методом POST отправляет данные с множество столбцов. Хочу, чтобы кнопка "оценить" не была доступна, пока хотя бы один пункт не выбран. Поигрался с примером, ничего не вышло, может есть секрет какой? Буду рад совету, спасибо. NMitra Здравствуйте, тут пока не запустили родительский селектор только JS. Если на радио-input хоть раз нажать, то потом его снять нельзя: http://jsfiddle.net/NMitra/tuq71ym7/

var c = document.querySelectorAll(‘table input’);
for (var i = 0; i FOMUVI Что-то не получается. Я с Java не знаком вообще. Чтобы заработало, нужно обязательно в HEAD поместить скрипт (нет возможности)? И у меня кнопка "оценить" это submit, потому нужно так написать document.querySelector(‘input[type="submit"]’).disabled = false; ? Кстати, у таблицы есть класс CSS, это не мешает? NMitra Скрипт добавляйте в конец страницы, поближе к футеру, а лучше за него. Вернее сначала HTML, а затем тег Анонимный Супер, спасибо огромное все работает) Анонимный Очень ёмко! А вот вопрос на засыпку:
По нажатию на кнопку меню открывается форма входа, в виде выпадающего списка. в ней есть один чекбокс, и когда на него нажимаешь форма сворачивается. Как это предотвратить? NMitra Нужен код. Анонимный извините за беспокойство, но уже разобралась.
ох уж эти красивые переключатели залипонные!) правда вписать их в дизайн сайта, наверное, довольно сложно. а знаете хоть один пример такой? NMitra Элементы формы так нагляднее получаются http://www.lukew.com/ff/entry.asp?1950 Анонимный Добрый день. Подскажите пожалуйста, что надо добавить что бы сворачивать ветви не зависимо от того что выделено в дереве с чекбоксами, и второй вопрос, как можно свернуть js дерево по событию?
Большое спасибо. NMitra Добрый день,на ваш вопрос не ответить мимоходом, а выделить время я смогу лишь на следующей недели. Если вас устроит, отпишитесь в комментариях. Анонимный Да, конечно устроит. Буду ждать. Большое спасибо. NMitra Независимая работа

Читайте также:  Программа для определения паролей на компьютере

var t = document.forms.Tree1;
[].forEach.call(t.querySelectorAll(‘fieldset’), function(eFieldset) <
var main = [].filter.call(t.querySelectorAll(‘[type="checkbox"]’), function(element) );
main.forEach(function(eMain) <
var l = [].filter.call(eFieldset.querySelectorAll(‘legend’), function(e)
);
l.forEach(function(eL) <
var all = eFieldset.querySelectorAll(‘[type="checkbox"]’);
eL.onclick = function()
eFieldset.onchange = function() <
var allChecked = eFieldset.querySelectorAll(‘[type="checkbox"]:checked’).length;
eMain.checked = allChecked == all.length;
eMain.indeterminate = allChecked > 0 && allChecked NMitra По второму пункту

document.querySelector(‘#svernut’).onclick = function() <
var all = t.querySelectorAll(‘fieldset’);
for(var i=0; i all[i]. ;
>
>

Весь пример http://jsfiddle.net/NMitra/uewct60o/ Анонимный Здравствуйте. Спасибо. Вы очень помогли, все получилось. Анонимный Здравствуйте, помогите пожалуйста.
Кнопка №6 — for="payt6"

Я хочу сделать чтобы кнопка, при нажатии показывала невидимый текст.
Пожалуйста отредактируйте код и объясните куда нужно вписывать текст.
Это что-то связанное с концом кода, я прав?
Заранее спасибо NMitra Здравствуйте,

#payt6:not(:checked) + .switch + div <
display: none;
> Анонимный это все не работает, если чекбокс и элемент на который он воздействует находятся не рядом, а например даже через какой-то див, поэтому все это не особо полезно NMitra Что именно делаете. Свой пример на http://jsfiddle.net/ разместите. Там селектор только поправить нужно. Анонимный Был бы признателен, если бы подсказали, как сделать через ксс что бы при отметке чекбокса, кнопка становилась активной?

Вот мой вариант —

Мне исполнилось 18 лет и я согласен с правилами предоставления услуги
описание 1
описание 2

#vvv <
display: none;
>
#vosem:checked

#eee <
display: none;
>
#vosem:checked

#vvv <
display: inline-block;
>

он работает только если инпут и кнопки расположены рядом, а как сделать что бы работало вне зависимости от положения друг относительно другу? NMitra См. http://jsfiddle.net/NMitra/jh1vtnhr/
Родительский селектор есть, но он ещё пока не поддерживается браузерами. Тогда бы совсем просто было. Анонимный Если местами переставить инпут и кнопки, то уже не работает ((( NMitra Без родительского селектора такое на CSS сделать затруднительно, зато на JS без проблем http://jsfiddle.net/NMitra/jh1vtnhr/1/ Анонимный Супер статья ))) побольше бы таких ) Dmytro Iatskyi Спасибо за статью!

Подскажите, пожалуйста, как сделать, в случае дерева чекбоксов, чтобы они не только отмечались в зависимости от отметки родительского, а и выполняли функции, подвязанные на них? В моём случае — это показ/скрытие Overlay на карте Google.

Спасибо! NMitra Внутри функции напишите свою функцию, например, здесь

Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Создаются следующим образом.

Атрибуты переключателей перечислены в табл. 1.

Табл. 1. Атрибуты переключателей

Атрибут Описание
checked Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name Имя группы переключателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value Задаёт, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 1.

Пример 1. Создание переключателей

HTML5 IE Cr Op Sa Fx

В результате получим следующее (рис. 1).

Рис. 1. Вид переключателей в браузере

Заметьте, что в данном примере значение атрибута name для всех переключателей одинаково, именно в таком случае браузер понимает, что переключатели связаны между собой и помечает только один пункт из предложенных. Значение атрибута value же должно различаться, чтобы обработчик формы мог понять, какой вариант выбран пользователем.

Атрибут type тега со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.

Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже.

Примечание: Чекбоксы похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать" значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.

Value Строка DOM отображающая значение радиокнопки
События change и input
Универсальные атрибуты checked
Атрибуты IDL checked и value
Методы select()

Атрибут value

Атрибут value — это строка DOM , содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.

Создание группы радиокнопок

Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ( name ). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе.

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

Читайте также:  Alcatel one touch 292

Например, если в Вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то Вы можете создать три радиокнопки с name= "contact" , но с разными value = "email" , value = "phone" и value = "mail" соответственно. Пользователь не видит атрибуты name и value (если только Вы не добавляете код для их отображения).

HTML будет выглядеть следующим образом:

Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут name со значением "contact" и уникальный атрибут value , который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный id , связанный с тегом представляет собой подпись к элементу пользовательского интерфейса."> через атрибут for для установления связи между конкретной меткой и конкретной радиокнопкой.

Вы можете опробовать этот код здесь:

Представление данных группы радиокнопок

Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде "contact=name". Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку "contact=phone" .

Если Вы пренебрежёте атрибутом value в Вашем HTML, то отправленные данные просто присвоят данной группе значение "on" . То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как "contact=on" и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут value !

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

Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута "checked" . Смотрите здесь Selecting a radio button by default.

Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока

Затем добавим немного JavaScript. Установим слушателя для события submit , которая будет отправляться при клике пользователя на кнопку "Отправить":

Опробуйте этот пример и убедитесь, что для группы радиокнопок "contact" будет только один результат.

Использование радиокнопок

Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространенные функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.

Выбор радиокнопки по умолчанию

Чтобы установить радиокнопку как выбранную по умолчанию, Вам необходимо подключить атрибут checked , как показано ниже в немного изменённой версии предыдущего примера.

В данном случае первая радиокнопка будет выбрана по умолчанию.

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

Providing a bigger hit area for your radio buttons

В примерах, представленных выше, Вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент представляет собой подпись к элементу пользовательского интерфейса."> , так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов в Ваших формах.

Валидация формы

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

Установка стилей радиокнопок

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

HTML будет выглядеть следующим образом:

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

CSS будет выглядеть так:

Самым примечательным здесь является использование свойства appearance с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству appearance значение none , Вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства border и border-radius , а также свойство transition для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс ), checkbox ( ) или option ( внутри ), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.’> :checked используется для указания стилей внешнего вида кнопок при их выборе.

Стоит иметь в виду, что свойство appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает Ваш сайт в каждом браузере!

Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который Вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.