Jquery checkbox checked. работа с чекбоксами в js
Содержание:
- Hide/show elements when checkbox is selected
- JavaScript
- Расположение
- Свойства элемента «Флажок»
- Checking if a checkbox is checked
- Using jQuery
- More
- Примеры стилизации флажков с ресурса codepen.io
- Комментарии 89
- Checkbox event handling using pure Javascript
- All attributes of input
- Images
- Обыкновенная галочка
- Использование jQuery
- Примеры использования CheckBox
- Красивые чекбоксы и радиокнопки на CSS3 без JavaScript
- JavaScript
- Value
- Input Checkbox Object Properties
Hide/show elements when checkbox is selected
I am sure most of you have seen a lot on the Internet which is when there is something hidden in the form , something like a section for extra information or feedback and you press on a checkbox to toggle it and show it or hide it . And this is what we will be building. We are going to be using jQuery because it will be much easier and shorter and I do not want you to get lost in a lot of lines but this example can be done with only javascript and it will not be hard .
Next step is creating the javascript which is going to make this textarea appear and disappear .
The javascript for this example is pretty straight forward :
Here, we are first grabbing the checkbox which we gave an id of more-info and attaching to it an onchange event that fires an anonymous function when the event is fired.
Inside this anonymous function we are having the same if statement we used in the previous example to check whether the checkbox is checked or not. And inside them we are using the jquery hide() and show() functions . These functions simply change the display type of the div (with id ‘conditional_part’) .
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()
Расположение
В общем случае группа чекбоксов должна располагаться в 1 столбец. В списке чекбоксов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.
Разбивать чекбоксы на несколько столбцов можно, если это разделение логически обосновано и понятно пользователю.
Группа из одного чекбокса требует аккуратного обращения при верстке формы.
Один чекбокс сразу с двумя подписями выглядит странно:
Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:
Если чекбокс поставить в колонку с полями, они будут воспринимается связанными по смыслу, хотя это не так:
Такой проблемы нет, если форма верстается в одну колонку:
Чтобы решить проблему при двухколоночной компоновке, одиночный чекбокс можно заменить на группу радиокнопок:
Если придумать уместное название для двух радиокнопок сложно, можно использовать тогл. Обычно, включение тогла приводит к моментальным изменениям в системе, но даже если такое поведение реализовать невозможно, лучше использовать тогл, чем одиночный чекбокс:
Если чекбокс связан по смыслу с другим элементом формы, их можно группировать:
Свойства элемента «Флажок»
| Свойство | Описание |
|---|---|
| AutoSize | Автоподбор размера «Флажка». True – размер автоматически подстраивается под длину набираемой строки. False – размер элемента управления определяется свойствами Width и Height. |
| ControlSource | Ссылка на источник данных для свойства Value. |
| ControlTipText | Текст всплывающей подсказки при наведении курсора на CheckBox. |
| Enabled | Возможность взаимодействия пользователя с элементом управления. True – взаимодействие включено, False – отключено (цвет флажка и надписи становится серым). |
| Font | Шрифт, начертание и размер текста надписи. |
| Height | Высота элемента управления. |
| Left | Расстояние от левого края внутренней границы пользовательской формы до левого края элемента управления. |
| Picture | Добавление изображения вместо текста надписи или дополнительно к нему. |
| PicturePosition | Выравнивание изображения и текста в поле надписи. |
| TabIndex | Определяет позицию элемента управления в очереди на получение фокуса при табуляции, вызываемой нажатием клавиш «Tab», «Enter». Отсчет начинается с 0. |
| TextAlign* | Выравнивание текста надписи: 1 (fmTextAlignLeft) – по левому краю, 2 (fmTextAlignCenter) – по центру, 3 (fmTextAlignRight) – по правому краю. |
| Top | Расстояние от верхнего края внутренней границы пользовательской формы до верхнего края элемента управления. |
| TripleState | Определяет, может ли пользователь делать выбор между двумя состояниями «Флажка» или между тремя, включая серую галочку на сером квадрате. True – доступны три состояния, False – доступны два состояния. |
| Value | Значение «Флажка»: True – галочка установлена, False – галочка не установлена, Null – серая галочка на сером квадрате. |
| Visible | Видимость элемента CheckBox. True – элемент отображается на пользовательской форме, False – скрыт. |
| Width | Ширина элемента управления. |
| WordWrap | Перенос текста надписи на новую строку при достижении границы ее поля. True – перенос включен, False – перенос выключен. |
* При загруженной в поле надписи картинке свойство TextAlign не работает, следует использовать свойство PicturePosition.
Свойство по умолчанию для элемента CheckBox – Value, основное событие – Click.
В таблице перечислены только основные, часто используемые свойства «Флажка». Все доступные свойства отображены в окне Properties элемента управления CheckBox.
Checking if a checkbox is checked
To get the state of a checkbox, whether checked or unchecked, you follow these steps:
- First, select the checkbox using the selecting DOM methods such as or .
- Then, access the property of the checkbox element. If its property is , then the checkbox is checked; otherwise, it is not.
Suppose that you have a checkbox like this:
To check if the checkbox is checked, you use the following code:
Additionally, you can use use the to check if the selector does not return Like this:
If a checkbox does not have the attribute, its default value is . For example:
If you get the attribute of a checkbox, you always get the string whether the checkbox is checked or not. For example:
See the following example:
Using jQuery
We could have done the same thing using jQuery and in fact, that is what we are going to be doing next . jQuery is the most famous JS library ever created , and a lot of people use it daily as it makes their job a lot easier . You do not need to worry if you do not know jQuery , it’s concepts are very easy and I will be explaining everything as we go along.
I only added jQuery and couple of CSS lines to style our page. I also added the same exact HTML code we used in the previous code , the only difference will be in our javascript code since in this example we will be using jQuery instead of plain javascript.
You may notice that the only thing I changed from the previous example is that I have deleted the onclick event in the checkbox which makes sense , since in jquery we will be attaching the event to the element no need to call it from the HTML code.
Now to the javascript code where all the magic happens :
If this seems overwhelming to you , no need to worry , I will be explaining everything in details. First, I am using the $(document).ready(); that I have told you about and inside it I added an anonymous function.
If you are not familiar with anonymous functions they are functions that are declared in runtime and the reason they are called anonymous is that you create them without giving them a name.
And inside the anonymous function I placed the following code :
First, we are using the dollar sign ‘$’ which is a shorthand for jQuery so this $(‘#fluency’) is the same exact thing as jQuery(‘#fluency’). Then we are attaching to it an on change event and inside it we are using the anonymous function syntax for the second time. The code that is inside the anonymous function will be run each time the event is fired.
This is the same exact if statement we used in the first example with only a very small change , which is instead of getting the checkbox using document.getElementById() we are using the “this” keyword. If you are not familiar with the ‘this’ keyword , here in this example it refers to the target that fired that event which is here the checkbox we want to grab.
More
Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements
Примеры стилизации флажков с ресурса 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
Комментарии 89
С file все проще: jsfiddle.net/tsLyW/ и будет работать во всех браузерах. Есть еще мысль заменить span на :before, но в любом случае понадобится контейнер.
А с select вариантов стилизации не особо много. Меня лично бесят кастомные селект-боксы. В большинстве своем они выглядят куда более отвратительно нежели нативные.
А теперь уберите оттуда:
сделал деградацию добавлением body:not(#foo) вначало так
body:not(#foo) input display:none; >
body:not(#foo) input + label span …
А разве так не получится?
Надо же как можно, оказывается:
В Safari в iOS :checked работает, там не работает привязанный label. Чтобы он заработал достаточно прописать ему пустой атрибут onclick.
В общем решение в посте так себе. Учитывая баги Webkit, которые обнаружены выше, я бы сделал примерно так (если опустить красивости):
Сейчас меня «накроет морем минусов» и всего такое, не важно, но сколько еще можно постить на хабру такую «воду»?
Хотите написать статью, изучите тему вдоль и поперек, то, что другие не знают, какие-то мелочи, детали, оставшиеся за сценой, что за унылое говно, ну, почему так, а?
В ключе данной статьи «изучить вдоль и поперек» это слишком громко. Способов это сделать на самом деле масса. Не стоит быть настолько уж суровым, бывают статьи и похуже, и скушнее, и водянистее… Причем в разы.
Хотя я бы не отказался от статейки по обзору различных способов стилизации форм.
Написать на изображении «No JavaScript» это совсем не комильфо. Если уж что-то и делать, то с обратной совместимостью и с учетом graceful degradation.
Есть такие (глубоко нативные, привычные и необходимые) вещи, которые никто не отменял, например Tab или Shift + Tab. Это должно поддерживаться. Ровно, как и выбрать чекбокс тем же «пробелом».
Фокуса на элементе не видно, без мыши — ноль копеек цена такой форме с такими элементами. Да что это я в самом деле…
Я о том и пишу, смысл это статьи какой?
Ее нужно было назвать как, «Охуенные чекбоксы, которые как-бы не везде работают и не совсем правильно работают. Но охуенные.».
Статья хорошая, спасибо. Поставил Like
Но меня всегда печалила необходимость придумывать и указывать идентификатор для атрибута «for», конечно, если форма собирается шаблонизатором, то никаких проблем нету, но для production ваше решение тоже не подходит, хотя бы потому, что не работает управление с клавиатуры. Я лично предпочту маленький js-файл (
700 байт) для отказа от атрибута «for» и для работающего управления с клавиатуры Пример
А вообще, в CSS4 Selector API предусмотрен Reference Combinator и Parent Selector для таких случаев. Возможно, в будущем мы сможем написать:
Правило применится к элементу
Жду не дождусь статей «Красивые чекбоксы и радиокнопки на CSS4 без JavaScript»
Источник
Checkbox event handling using pure Javascript
Now what we need to do is to attach an event to the checkbox so it checks its state each time it’s changed and show the message if it has been unchecked , notice I added a checked property to the checkbox so it is checked by default.
There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.
There is a problem with the onchange event is that it is not called until the checked state has been updated and since Internet Explorer does not fire the onChange event till the checkbox loses focus so it will create different results than in Google chrome and other browsers so to avoid all this I recommend you stick to the onclick event.
Here I added an on click event and make it so it will call a function called checkFluency() once it is clicked
Here in the checkFluency() function , picked the checkbox and then if it is not checked an alert is shown saying “you need to be fluent in English to apply for the job”
All attributes of input
| Attribute name | Values | Notes |
|---|---|---|
| step | Specifies the interval between valid values in a number-based input. | |
| required | Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty. | |
| readonly | Disallows the user from editing the value of the input. | |
| placeholder | Specifies placeholder text in a text-based input. | |
| pattern | Specifies a regular expression against which to validate the value of the input. | |
| multiple | Allows the user to enter multiple values into a file upload or email input. | |
| min | Specifies a minimum value for number and date input fields. | |
| max | Specifies a maximum value for number and date input fields. | |
| list | Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field. | |
| height | Specifies the height of an image input. | |
| formtarget | Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of «submit» or «image». | |
| formmethod | Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of «submit» or «image». | |
| formenctype | Specifies how form data should be submitted to the server. Only for use on input types «submit» and «image». | |
| formaction | Specifies the URL for form submission. Can only be used for type=»submit» and type=»image». | |
| form | Specifies a form to which the input field belongs. | |
| autofocus | Specifies that the input field should be in focus immediately upon page load. | |
| accesskey | Defines a keyboard shortcut for the element. | |
| autocomplete | Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields. | |
| border | Was used to specify a border on an input. Deprecated. Use CSS instead. | |
| checked | Specifies whether a checkbox or radio button form input should be checked by default. | |
| disabled | Disables the input field. | |
| maxlength | Specifies the maximum number of characters that can be entered in a text-type input. | |
| language | Was used to indicate the scripting language used for events triggered by the input. | |
| name | Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted. | |
| size | Specifies the width of the input in characters. | |
| src | Defines the source URL for an image input. | |
| type | buttoncheckboxfilehiddenimagepasswordradioresetsubmittext | Defines the input type. |
| value | Defines an initial value or default selection for an input field. |
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider
Обыкновенная галочка
«Галочка» знакома любому человеку. Этот символ впервые встречается еще в школе. Обычно его используют для выбора правильного ответа в процессе прохождения тестирования или анкетирования.
Сегодня такие «галочки» используются и в интернете. Даже обычная процедура регистрации на любом интернет-портале не может обойтись без этого символа.
«Галочки» активно применяются и в интернет-торговле. При помощи чекбоксов пользователи, которые оформляют заказ, выбирают те товары, которые им необходимы. Чекбоксы также применяются в компьютерных играх, точнее – в процессе их инсталляции. Например, «установщик» может попросить пользователя выбрать необходимое ПО.
Использование 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.
Примеры использования CheckBox
Пример 1
Отображение элемента управления CheckBox на пользовательской форме с параметрами, заданными в коде VBA Excel:
|
1 |
PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Нажмите на меня» .ControlSource=»A1″ .Value=False .Left=12 .Top=12 EndWith EndSub |
Размещается данная процедура в модуле пользовательской формы.
Если несколько элементов управления CheckBox привязать к одной ячейке, то при клике на одном из них, менять свое состояние будут и все остальные.
Пример 2
Смена надписи «Флажка» в зависимости от его состояния:
|
1 |
‘Устанавливаем первоначальные PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Поставьте галочку» .Value=False .TripleState=False EndWith EndSub ‘Меняем надпись «Флажка» при PrivateSubCheckBox1_Change() IfCheckBox1.Value Then CheckBox1.Caption=»Снимите галочку» Else CheckBox1.Caption=»Поставьте галочку» EndIf EndSub |
Пример 3
Скрытие и отображение, изменение доступности других элементов управления с помощью «Флажка».
Для реализации этого примера необходимо создать пользовательскую форму с четырьмя элементами управления: CheckBox1, TextBox1, TextBox2 и CommandButton1. А в модуле формы разместить следующий код:
|
1 |
‘Устанавливаем первоначальные PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Хочу сложить два числа» .Value=False .TripleState=False EndWith WithTextBox1 .Enabled=False .Text=»Слагаемое 1″ EndWith WithTextBox2 .Enabled=False .Text=»Слагаемое 2″ EndWith WithCommandButton1 .Caption=»Сложить» .Visible=False EndWith EndSub ‘Меняем свойства других элементов PrivateSubCheckBox1_Change() IfCheckBox1.Value Then TextBox1.Enabled=True TextBox2.Enabled=True CommandButton1.Visible=True Else TextBox1.Enabled=False TextBox2.Enabled=False CommandButton1.Visible=False EndIf EndSub ‘Складываем два числа PrivateSubCommandButton1_Click() IfIsNumeric(TextBox1)AndIsNumeric(TextBox2)Then MsgBox TextBox1&» + «&TextBox2&» = «_ &CDbl(TextBox1)+CDbl(TextBox2) EndIf EndSub |
Форма открывается с недоступными для пользователя текстовыми полями и скрытой кнопкой «Сложить»:
После установки галочки на флажке текстовые поля становятся доступными для редактирования, и отображается кнопка «Сложить»:
Красивые чекбоксы и радиокнопки на CSS3 без JavaScript
Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.
Для начала сделаем простой checkbox:
Теперь необходимо спрятать чекбокс и использовать спрайты для отображения отмеченного чекбокса/радиокнопки:
Осталось только заставить все это работать. По клику должен меняться спрайт с отмеченного на неотмеченный и наоборот:
Поддержка браузерами
Псевдоклассы, в частности используемый :checked, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже) и Safari в iOS ниже 6-ой версии. Вот так наша форма отображается в IE:
Ой, у вас баннер убежал!
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()
Value
A representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the given to the data submitted with the checkbox’s . Take the following example:
In this example, we’ve got a name of , and a value of . When the form is submitted, the data name/value pair will be .
If the attribute was omitted, the default value for the checkbox is , so the submitted data in that case would be .
Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. ); the value is not submitted to the server at all. If you wanted to submit a default value for the checkbox when it is unchecked, you could include an <input type=»hidden»> inside the form with the same and , generated by JavaScript perhaps.
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 |
