Jquery checkbox checked. работа с чекбоксами в js

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
2
3
4
5
6
7
8
9

PrivateSubUserForm_Initialize()

WithCheckBox1

.Caption=»Нажмите на меня»

.ControlSource=»A1″

.Value=False

.Left=12

.Top=12

EndWith

EndSub

Размещается данная процедура в модуле пользовательской формы.

Если несколько элементов управления CheckBox привязать к одной ячейке, то при клике на одном из них, менять свое состояние будут и все остальные.

Пример 2
Смена надписи «Флажка» в зависимости от его состояния:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

‘Устанавливаем первоначальные
‘значения свойств «Флажка»

PrivateSubUserForm_Initialize()

WithCheckBox1

.Caption=»Поставьте галочку»

.Value=False

.TripleState=False

EndWith

EndSub

‘Меняем надпись «Флажка» при
‘смене параметра CheckBox1.Value

PrivateSubCheckBox1_Change()

IfCheckBox1.Value Then

CheckBox1.Caption=»Снимите галочку»

Else

CheckBox1.Caption=»Поставьте галочку»

EndIf

EndSub

Пример 3
Скрытие и отображение, изменение доступности других элементов управления с помощью «Флажка».

Для реализации этого примера необходимо создать пользовательскую форму с четырьмя элементами управления: CheckBox1, TextBox1, TextBox2 и CommandButton1. А в модуле формы разместить следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

‘Устанавливаем первоначальные
‘значения свойств элементов управления

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
Добавить комментарий

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

Adblock
detector