Input type checkbox checked: — HTML: HyperText Markup Language

Наконец, давайте поговорим о кнопке сброса.

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

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

См. Обман с флажком пера: список дел от Уилла Бойда (@lonekorean) на CodePen.

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

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

 
 
  
 Создать список дел 
  
 
 
Выполнено
 
 
Не выполнено
 
 
 
 

Механика разделения списка реализована с помощью CSS flexbox. Вот соответствующий CSS.

 .items { 
 display: flex; 
 flex-direction: столбец; 
 } 
 .done { 
 заказ: 1; 
 } 
 
 input:checked + label { 
 order: 2; 
 } 
 
 .undone { 
 заказ: 3; 
 } 
 
 этикетка { 
 порядок: 4; 
 } 
 

CSS flexbox позволяет напрямую переставлять элементы с помощью свойства order . Значение заказа <метка> изменяется с 4 на 2 , когда его флажок установлен, перемещая его из-под «Не выполнено»

К сожалению, навигация с помощью клавиатуры и многие средства чтения с экрана будут следовать порядку элементов в DOM, даже если они были визуально изменены с помощью CSS flexbox. Это делает заголовки «Готово» и «Не выполнено» бесполезными для программ чтения с экрана, поэтому я добавил aria-hidden="true" им — лучше их игнорировать, чем вызывать путаницу. Кроме того, разделенным списком по-прежнему можно полностью управлять с помощью клавиатуры, а средства чтения с экрана по-прежнему сообщают о состоянии элемента (отмечен/не отмечен).

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

Последняя демонстрация. Здесь показано, как выделить сечение данных, которое соответствует выбранному критерию.

См. Обман с флажком пера: групповой фильтр Уилла Бойда (@lonekorean) на CodePen.

Вот сокращенный HTML. Обратите внимание, что атрибут data-teams представляет собой список разделенных пробелами атрибутов переключателя id . Вот как мы сопоставляем персонажей с командами.

  
 Оригинальные Люди Икс 
  
 
 
 
 <ул> 
 
 
Ангел
 
  png" alt=""> 
 
 
 
  
  
 

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

элементов

Вот CSS, который выделяет персонажей, когда выбрана их команда.

 #original:checked ~ .characters [data-teams~="original"] h3, 
 #force:checked ~ .characters [data-teams~="force"] h3, 
 #factor:checked ~ .characters [ data-teams~="factor"] h3, 
 #hellfire:checked ~ .characters [data-teams~="hellfire"] h3 { 
 /* стили для отображения имени персонажа */ 
 } 
 #original:checked ~ . символы [data-teams~="original"] img, 
 #force:checked ~ . characters [data-teams~="force"] img, 
 #factor:checked ~ .characters [data-teams~="factor"] img, 
 #hellfire:checked ~ .characters [data-teams~="hellfire"] img { 
 /* стили для отображения аватара персонажа */ 
 } 
 

Я знаю, что эти селекторы выглядят неубедительно, но они не так уж плохи. Давайте разберем строку 1 в качестве примера. Говоря об этом, «когда проверяется элемент с id «оригинал», найдите в элементе «символы» родственного элемента что-либо с атрибутом data-teams , содержащим «оригинал», затем найдите

Надеюсь, вы получили такое же удовольствие, играя с этими демонстрационными примерами, как и я, создавая их. Мне было очень интересно посмотреть, что я могу сделать с чем-то таким скромным, как флажок. Я не стесняюсь использовать JavaScript, когда это уместно, но приятно иметь возможность делать так много без него. Спасибо за чтение!

Привязка: Флажки | Aurelia

Введение

Aurelia поддерживает двустороннюю привязку различных типов данных к элементам ввода флажков.

Логические значения

Привяжите логическое свойство к проверенному атрибуту элемента ввода, используя checked.bind="myBooleanProperty" .

  приложение класса экспорта {
    материнская плата = ложь;
    процессор = ложь;
    память = ложь;
  }
  
   

   приложение класса экспорта {
    материнская плата = ложь;
    процессор = ложь;
    память = ложь;
  }
  
   

  <шаблон>
    <форма>
       
Товары
 
       Материнская плата
       ЦП
       Память
  
      материнская плата = ${материнская плата}

      ЦП = ${ЦП}

      память = ${память}

    
  
  
   

Массив чисел

Набор элементов-флажков представляет собой интерфейс множественного выбора.