Radio jquery установить checked: Работа с Radio Button в JQuery

JQuery Mobile Docs — Радиокнопки

Радиокнопки

  • Основы
  • Опции
  • Методы
  • События

Радиокнопки используются для предоставления списка опций, где можно выбрать только один элемент. Традиционные радиокнопки на рабочем столе не оптимизированы для сенсорного ввода, поэтому jQuery Mobile меняет метку на для радиокнопок, чтобы они были крупнее и выглядели кликабельными. Пользовательский набор значков добавляется к этикетке для обеспечения дополнительной визуальной обратной связи.

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

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

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

Чтобы создать набор переключателей, добавьте input с атрибутом type="radio" и соответствующей меткой . Установите атрибут для метки , чтобы он соответствовал id входа , чтобы они были семантически связаны.

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

Чтобы визуально интегрировать несколько переключателей в вертикально сгруппированный набор кнопок, платформа автоматически удалит все поля между кнопками и закруглит только верхний и нижний углы набора, если в элементе есть атрибут data-role="controlgroup" . контейнер.

  
Выберите питомца:

Это создаст вертикально сгруппированный набор переключателей. Стили по умолчанию задают ширину группы кнопок равной 100% от родительского контейнера и размещают легенду на отдельной строке.

Выберите питомца: Кот Собака Хомяк Ящерица

Мини-версия

Чтобы получить более компактную версию, которая будет полезна на панелях инструментов и в ограниченном пространстве, добавьте к элементу атрибут data-mini="true" , чтобы создать мини-версию.

data-mini="true" >

Это приведет к созданию радиокнопки, которая не такая высокая, как в стандартной версии, и имеет меньший размер текста.

Кредит Дебет Наличные

Полевые контейнеры

При необходимости поместите радиокнопки в контейнер с атрибутом data-role="fieldcontain" , чтобы помочь визуально сгруппировать его в более длинной форме.

  
Выберите питомца:

Выберите питомца: Кот Собака Хомяк Ящерица

Наборы горизонтальных переключателей

Радиокнопки также можно использовать для сгруппированных наборов кнопок, где одновременно можно выбрать только одну кнопку, например, элемент управления переключателем видов. Чтобы сделать горизонтальный набор переключателей, добавьте data-type="horizontal" к набору полей .

тип данных = "горизонтальный" >

Вид макета: Список Сетка Галерея

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

:checked — CSS: каскадные таблицы стилей

Селектор псевдокласса CSS :checked представляет любое радио (

), флажок ( ) или option ( в
<дел>
<выбрать имя="мой выбор">
CSS
 раздел,
выбирать {
  поле: 8px;
}
/* Метки для проверенных входных данных */
ввод: отмечен + метка {
  красный цвет;
}
/* Радиоэлемент, если отмечен */
ввод [тип = "радио"]: отмечен {
  box-shadow: 0 0 0 3px оранжевый;
}
/* Элемент флажка, если он отмечен */
ввод [тип = "флажок"]: отмечен {
  box-shadow: 0 0 0 3px ярко-розовый;
}
/* Элементы option, если они выбраны */
вариант: отмечен {
  box-shadow: 0 0 0 3px лайм;
  красный цвет;
}
 
Результат

Переключение элементов со скрытым флажком

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

HTML
 
<таблица>
  
    
      Столбец №1
      Столбец №2
      Столбец № 3
    
  
  
    
      [подробнее]
      [подробнее]
      [подробнее]
[текст ячейки] [текст ячейки] [текст ячейки] [текст ячейки] [текст ячейки] [текст ячейки] [подробнее] [подробнее] [подробнее] [подробнее] [подробнее] [подробнее]
CSS
 /* Скрыть переключатель */
# развернуть-переключить {
  дисплей: нет;
}
/* Скрыть расширяемый контент по умолчанию */
.расширяемый {
  видимость: коллапс;
  фон: #ддд;
}
/* Стиль кнопки */
#expand-btn {
  отображение: встроенный блок;
  поле сверху: 12px;
  отступ: 5px 11px;
  цвет фона: #ff7;
  граница: сплошная 1px;
  радиус границы: 3px;
}
/* Показывать скрытое содержимое, когда флажок установлен */
#expand-toggle:checked ~ * .
expandable { видимость: видимая; } /* Стиль кнопки при установленном флажке */ #expand-toggle:checked ~ #expand-btn { цвет фона: #ccc; }
Result
Specification
HTML Standard
# selector-checked
Selectors Level 4
# checked

BCD tables only load in the browser with JavaScript включено. Включите JavaScript для просмотра данных.

  • Веб-формы — работа с пользовательскими данными
  • Стилизация веб-форм
  • Связанные элементы HTML: , ,