Чекбокс в html: — Web technology for developers – Как сделать чекбокс на HTML/CSS

Leave a Comment / Html / By /

Поговорим про :checked / Habr

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

Но обо всём по порядку.
:checked или немного теории

Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
Вкратце, этот псевдокласс применяется к тем input’ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).
Табы, табы, табы

Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text» выставленное в readonly), но в большинстве своём они опирались на псевдокласс :target, чьё использование немного неоправданно из-за «прыгающего» контента.

Из-за чего была придумана сверхпростая реализация вкладок при помощи :checked и радиобаттонов.

Дабы не перегружать читателя кодом, я урезал пример с 4 вкладок до 2, полный пример доступен тут

HTML:

<section>
<input type="radio" name="radiobutton" checked="checked"/>
<label for="tab1">qutIM 0.1</label>
<input type="radio" name="radiobutton"/>
<label for="tab2">qutIM 0.2</label>
<article>
qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году.
</article>
<article>
qutIM 0.2 — Многопротокольный клиент, вышедший в 2010 году.
</article>
</section>

CSS:

input { 
	display: none;
}
			
input:checked + label {
	background: #CCC;
}
			
input:checked + label + input + label + article { /* Страшно? */
	display: block;
}
			
input:checked + label + article + article {
	display: block;
}

			
article {
	display: none;
}

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

Сей код корректно работает в Firefox, Opera, IE9+, но не работает в Webkit-браузерах. а вот тут я немного поспешил.
WebKit не обновляет значение до изменения кода, но его можно принудительно заставить это делать, добавив весьма грязный хак:

section {
	-webkit-animation: 0.1s hack infinite;
}
			
@-webkit-keyframes hack {
	from {margin: 0; padding: 0;}
	to {margin: 0; padding: 0;}
}

Анимация, которая ничего не делает. Вебкит не перестаёт удивлять.

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

Немного бреда

А что, если использовать чекбоксы для ввода двоичных чисел?

Берём два чекбокса, располагаем последовательно и делаем что-то вроде:

input + div::after {
content: "0";
}

input:checked + div::after {
content: "1";
}

input:checked + input + div::after {
content: "2";
}

input:checked + input:checked + div::after {
content: "3";
}

Бред? Сумасшествие? Троллейбус.jpg? На самом деле, всего-лишь демонстрация и немного свободного времени.
К слову, за полчаса был написан вот такой небольшой скриптик, генерирующий стиль (Аналогичный вышенаписанному) и строчку из чекбоксов для перевода из двоичной системы в десятеричную 🙂
Немного погодя был написан аналогичный скрипт, генерирующий аналогичный стиль, но для перевода из троичных чисел в десятеричные.
В HTML существуют tri-state чекбоксы, но для их создания требуется javascript (для выставления элементу indeterminate = true), а так же есть псевдокласс :indeterminate по аналогии с :checked.

Разумеется, и речи не идёт где-то это применять вот таким методом. Всё это приводится как информация к размышлению.

А ещё?

Вот здесь можно почитать заметку за авторством kizu про выпадающие менюшки, основанные на том же принципе.

HTML: создание переключателей и чекбоксов

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

Создание переключателя в HTML:

<html>

<head>

<meta charset=»utf-8″>

<title>Переключатели</title>

</head>

<body>

<form action=»handler.php»>

 <p><b>Переключатели или чекбоксы?</b></p>

  <p><input name=»vopros» type=»radio» value=»perekluchateli»> Переключатели</p>

  <p><input name=»vopros» type=»radio» value=»chekboxi»> Чекбоксы</p>

  <p><input name=»vopros» type=»radio» value=»drugoe»>Другое</p>

  <p><input type=»submit» value=»Выбрать»></p>

</form>

</body>

</html>

Создание чекбокса в  HTML:

<html>

<head>

<meta charset=»utf-8″>

<title>Чекбоксы</title>

</head>

<body>

<form action=»handler.php»>

 <p>Чекбоксы или переключатели</p>

 <p><input type=»checkbox» name=»a» value=»chekboxi»> Чекбоксы </p>

 <p><input type=»checkbox» name=»a» value=»perekluchateli»> Переключатели </p>

 <p><input type=»submit» value=»Выбрать»></p>

</form>

</body>

</html>

</body>

</html>

Переключатели и чекбоксы в браузере:

Атрибут checked | HTML | WebReference

Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.

Синтаксис

<input type="radio" checked>
<input type="checkbox" checked>

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

 
 
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>INPUT, атрибут checked</title>
 </head>
 <body>
  <form method="post" action="input5.php">
   <p><b>С какими операционными системами вы знакомы?</b></p>
   <p><input type="checkbox" name="option1" value="a1" checked>Windows 95/98<Br>
   <input type="checkbox" name="option2" value="a2">Windows 2000<Br>
   <input type="checkbox" name="option3" value="a3">System X<Br> 
   <input type="checkbox" name="option4" value="a4">Linux<Br> 
   <input type="checkbox" name="option5" value="a5">X3-DOS</p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Помеченный флажок в форме

Рис. 1. Помеченный флажок в форме

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 08.11.2016

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Идентификация элементов javascript checkbox и radio

На уроке рассматриваются способы доступа в javascript к checkbox (флажкам) и radio (радио-кнопкам или переключателям). Разбирается принцип работы со свойством checked для осуществления проверки radio и checkbox


Объект javascript checkbox

<form name="f1">
<input type="checkbox" name="yourName"> Да
</form>

<form name=»f1″> <input type=»checkbox» name=»yourName»> Да </form>

Элемент checkbox идентифицируется:

document.getElementById('ch2').checked=true;

document.getElementById(‘ch2’).checked=true;

Свойства элемента checkbox:

  • checked — содержит булево значение true или false, в зависимости от того, отмечен или нет данный флажок;
  • name — соответствует атрибуту name тега
    input
  • value — соответствует атрибуту value тега input
  • type — для объектов checkbox значением этого атрибута является строка checkbox
    • Пример: По щелчку на элементе флажок (checkbox) выводить диалоговое окно с сообщением для подтверждения: «Номер люкс очень дрогой. Вы уверены?». Скрипт описать в качестве значения атрибута.
    <input type="checkbox" name="checkbox1"  value="Номер Люкс"  onсlick="
      confirm('Номер люкс очень дорогой. Вы уверены?')">Номер люкс

    <input type=»checkbox» name=»checkbox1″ value=»Номер Люкс» onсlick=» confirm(‘Номер люкс очень дорогой. Вы уверены?’)»>Номер люкс

    Свойство checked

    Пример: По загрузке страницы устанавливать флажок (checkbox) отмеченным

    В скрипте:
    function check(){
	 document.f1.ch2.checked=true;
}

    function check(){ document.f1.ch2.checked=true; }

    В html:

    <body onload="check()">
<form name="f1">
<input type="checkbox"  name="ch2">пункт1<br>
<input type="checkbox"  name="ch3">пункт2<br>
</form> …

    <body onload=»check()»> <form name=»f1″> <input type=»checkbox» name=»ch2″>пункт1<br> <input type=»checkbox» name=»ch3″>пункт2<br> </form> …

    Задание js12_1. Создать страницу проверки знаний учащегося с одним вопросом и тремя ответами на вопрос: два из них правильные и один неправильный. Осуществить проверку правильности отмеченных при помощи элементов формы checkbox ответов. Функцию проверки запускать по щелчку кнопки

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

    Элемент javascript radio

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

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


    Рассмотрим пример использования радиокнопок:
    html-код:
    <body>
<form name="f1">
Ваш пол:<br>
<input type="radio" name="r1">м<br>
<input type="radio" name="r1">ж<br>
<input type="button">
</form>
</body>

    <body> <form name=»f1″> Ваш пол:<br> <input type=»radio» name=»r1″>м<br> <input type=»radio» name=»r1″>ж<br> <input type=»button»> </form> </body>

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

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

    function fanc(){ document.getElementById(«id1»).checked=true; document.f1.r1[0].checked=true; document.f1[‘r1’][0].checked=true; }

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

    Свойства:

  • checked — содержит булево значение true или false, в зависимости от того, выбрана или нет данная селекторная кнопка;
  • length — представляет количество селекторных кнопок в объекте radio;
  • name — соответствует атрибуту name тега input
  • value — соответствует атрибуту value тега input ;
  • type — для объектов radio значением этого атрибута является строка «radio»

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

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



    Скрипт:
    function fanc(){
	document.f1.r1[0].checked=true;
}

    function fanc(){ document.f1.r1[0].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>

    <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.
    Создать страницу проверки знаний учащегося с вопросом: «Какой заряд у электрона?» и двумя ответами: «положительный» (неправильный) и «отрицательный» (правильный). Осуществить проверку правильности отмеченного при помощи элемента формы radio ответа. Функцию проверки запускать по щелчку кнопки

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *