Проверить нажат ли чекбокс javascript пример

Browser compatibility

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub


Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support Yes Edge Full support 12 Firefox Full support Yes IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

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

Проверяем нажали checkbox через -> getElementsByName

getElementsByNamename=»its_name»getElementsByClassNamegetElementsByName

Соберем опять весь код проверки нажатого чекбокса вместе:

<input type=»checkbox» name=»its_name»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>.

<button id=»submit_3″>Проверить нажат ли checkbox</button>

<script>

document.getElementById(«submit_3»).onclick = function(){

if (document.getElementsByName(«its_name»).checked) { alert(«Чекбокс нажат -вариант №4»); } else { alert(«Чекбокс не нажат-вариант №4»); }

}

</script>

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

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

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

Рассмотрим пример использования радиокнопок: html-код:

<body>
<form name="f1">
Ваш пол:<br>
<input type="radio" name="r1" id="id1">м<br>
<input type="radio" name="r1" id="id2">ж<br>
<input type="button" onclick="fanc()">
<form>
<body>

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

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

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

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

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

Скрипт:

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

Задание js12_2. Создать страницу проверки знаний учащегося с вопросом: «Какой заряд у электрона?» и двумя ответами: «положительный» (неправильный) и «отрицательный» (правильный). Осуществить проверку правильности отмеченного при помощи элемента формы ответа. Функцию проверки запускать

Вариант №2 проверки чокнутого checkbox -> getElementById

Второй вариант проверки чекнутости чекбокса абсолютно одинаковый с первым вариантом, единственное отличие, что вместо просто id используем конструкцию:

document.getelementbyid(«submit_1»).onclick против submit .onclick

И с rules тоже самое… сразу перейдем с скрипту второго варианта:

<input type=»checkbox» id=»rules_1″><i>Я согласен с <a href=»» target=»_blank»>Условиями</a></i>.

<button id=»submit_1″>Проверить нажат ли checkbox</button>

<script>

document.getElementById(«submit_1»).onclick = function(){

if (document.getElementById(«rules_1»).checked) { alert(«Чекбокс нажат -вариант №2»); } else { alert(«Чекбокс не нажат-вариант №2»); }

}

</script>

Examples

The following example is an extended version of the «multiple checkboxes» example we saw above — it has more standard options, plus an «other» checkbox that when checked causes a text field to appear to enter a value for the «other» option. This is achieved with a simple block of JavaScript. The example also includes some CSS to improve the styling.

HTML

<form>
  <fieldset>
  <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding">
      <label for="coding">Coding</label>
    </div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music">
      <label for="music">Music</label>
    </div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art">
      <label for="art">Art</label>
    </div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports">
      <label for="sports">Sports</label>
    </div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking">
      <label for="cooking">Cooking</label>
    </div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other">
      <label for="other">Other</label>
      <input type="text" id="otherValue" name="other">
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

CSS

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

JavaScript

var otherCheckbox = document.querySelector('input');
var otherText = document.querySelector('input');
otherText.style.visibility = 'hidden';

otherCheckbox.addEventListener('change', () => {
  if(otherCheckbox.checked) {
    otherText.style.visibility = 'visible';
    otherText.value = '';
  } else {
    otherText.style.visibility = 'hidden';
  }
});

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() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() 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()

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Вариант №1 проверки чокнутого checkbox

Нам потребуется тег с уникальным идентификатором(id) и еще кнопка по которой мы будем нажимать!

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»ссылка»>Условиями</a></i> <button id=»submit»>Создать аккаунт</button>

Далее нам понадобится скрипт, который сможет определить, msk kb накат чекбокс или нет:

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

Теперь нам понадобится onclick, для отслеживания нажатия на кнопку! И соберем весь код вместе:

<input type=»checkbox» id=»rules»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>

<button id=»submit»>Создать аккаунт</button>

<script>

submit.onclick = function(){

if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

}

</script>

Value

A representing the value of the checkbox. This is never seen on the client-side, but on the server this is the given to the data submitted with the checkbox’s . Take the following example:

<form>
  <div>
    <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

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.

Все способы проверить нажат ли checkbox с примерами

  1. -> id
  2. -> getElementById
  3. -> getElementsByClassName
  4. -> getElementsByName
  5. Скачать
  1. Алгоритм проверки нажатого чекбокса js — заключается в самом главном, нам нужно обратиться к тегу, каким-то из способов! Если мы смогли получить объект, то далее мы можем делать с этим тегом все, что нам вздумается!

  2. Для того, чтобы проверить состояние checkbox, нам потребуется пример! Предположим, что у нашего чекбокса есть id

    В случае с id можно пойти двумя путями:

    Нам потребуется тег с уникальным идентификатором(id) и еще кнопка по которой мы будем нажимать!

    <input type=»checkbox» id=»rules»><i>Я согласен с <a href=»ссылка»>Условиями</a></i> <button id=»submit»>Создать аккаунт</button>

    Далее нам понадобится скрипт, который сможет определить, msk kb накат чекбокс или нет:

    if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

    Теперь нам понадобится onclick, для отслеживания нажатия на кнопку! И соберем весь код вместе:

    <input type=»checkbox» id=»rules»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>

    <button id=»submit»>Создать аккаунт</button>

    <script>

    submit.onclick = function(){

    if (rules.checked) { alert(«Чекбокс нажат -вариант №1»); } else { alert(«Чекбокс не нажат-вариант №1»); }

    }

    </script>

    Для того, чтобы проверить, нажат ли чекбокс, нажмите прямо сейчас на кнопку ивы получите результат, поле этого, отметьте флажок checkbox-а и нажмите повторно на кнопку Проверить нажат ли checkbox. Я согласен с Условиями. Проверить нажат ли checkbox

  3. Второй вариант проверки чекнутости чекбокса абсолютно одинаковый с первым вариантом, единственное отличие, что вместо просто id используем конструкцию:

    document.getelementbyid(«submit_1»).onclick против submit .onclick

    И с rules тоже самое… сразу перейдем с скрипту второго варианта:

    <input type=»checkbox» id=»rules_1″><i>Я согласен с <a href=»» target=»_blank»>Условиями</a></i>.

    <button id=»submit_1″>Проверить нажат ли checkbox</button>

    <script>

    document.getElementById(«submit_1»).onclick = function(){

    if (document.getElementById(«rules_1»).checked) { alert(«Чекбокс нажат -вариант №2»); } else { alert(«Чекбокс не нажат-вариант №2»); }

    }

    </script>

    Я согласен с Условиями. Проверить нажат ли checkbox

  4. При проверке нажат ли checkbox по классу, чуть-чуть отличается от верхнего примера!

    Заменяем id на class=»its_class», в условие добавляем getElementsByClassName и здесь далее нужно уточнить, что данный метод получает массив классов, поэтому, добавляем признак массива квадратные скобки со значением «0»

    Соберем весь код вместе:

    <input type=»checkbox» class=»its_class»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>.

    <button id=»submit_2″ >Проверить нажат ли checkbox</button>

    <script>

    document.getElementById(«submit_2»).onclick = function(){

    if (document.getElementsByClassName(«its_class»).checked) { alert(«Чекбокс нажат -вариант №3»); } else { alert(«Чекбокс не нажат-вариант №3»); }

    }

    </script>

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

    Я согласен с Условиями. Проверить нажат ли checkbox

  5. Что чаще всего мы можем наблюдать во всех — это атрибут name. Следующий вариант получения результат нажат ли чекбокс илии нет через getElementsByName.

    Опять поступаем, как и в предыдущем пункте, заменяем класс на name=»its_name», заменяем getElementsByClassName на getElementsByName — этот метод также получает массив… поэтому, после названия name ставим !

    Соберем опять весь код проверки нажатого чекбокса вместе:

    <input type=»checkbox» name=»its_name»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>.

    <button id=»submit_3″>Проверить нажат ли checkbox</button>

    <script>

    document.getElementById(«submit_3»).onclick = function(){

    if (document.getElementsByName(«its_name»).checked) { alert(«Чекбокс нажат -вариант №4»); } else { alert(«Чекбокс не нажат-вариант №4»); }

    }

    </script>

    Ну и собственно мы понимаем на 4 примере проверки нажат ли checkbox, что нужно здесь делать!

    Я согласен с Условиями. Проверить нажат ли checkbox

Вас может еще заинтересовать список тем : #JS | #JS_JQUERY | #FORM | #INPUT | #CHECKBOX | Последняя дата редактирования : 2020-02-27 09:54 Название скрипта :Проверка нажат ли checkbox javascript

Скрипт № 63.10Ссылка на скачивение: Все скрипты на

https://dwweb.ru/comments_1_5/include/img/hand_no_foto.png no no   BBcode

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() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() 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()

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 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 AnimationsGet Iframe Elements

Using checkbox inputs

We already covered the most basic use of checkboxes above. Let’s now look at the other common checkbox-related features and techniques you’ll need.

Handling multiple checkboxes

The example we saw above only contained one checkbox; in real-world situations you’ll be likely to encounter multiple checkboxes. If they are completely unrelated, then you can just deal with them all separately, as shown above. However, if they’re all related, things are not quite so simple.

For example, in the following demo we include multiple checkboxes to allow the user to select their interests (see the full version in the section).

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

In this example you will see that we’ve given each checkbox the same . If both checkboxes are checked and then the form is submitted, you’ll get a string of name/value pairs submitted like this: . When this string reaches the server, you need to parse it other than as an associative array, so all values, not only the last value, of are captured. For one technique used with PHP, see Handle Multiple Checkboxes with a Single Serverside Variable, for example.

Checking boxes by default

To make a checkbox checked by default, you simply give it the attribute. See the below example:

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked>
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

Providing a bigger hit area for your checkboxes

In the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated element as well as on the checkbox itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices like smartphones.

Beyond accessibility, this is another good reason to properly set up elements on your forms.

Indeterminate state checkboxes


In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. This is a state in which it’s impossible to say whether the item is toggled on or off. This is set using the object’s property via JavaScript (it cannot be set using an HTML attribute):

inputInstance.indeterminate = true;

A checkbox in the indeterminate state has a horizontal line in the box (it looks somewhat like a hyphen or minus sign) instead of a check/tick in most browsers.

There are not many use cases for this property. The most common is when a checkbox is available that «owns» a number of sub-options (which are also checkboxes). If all of the sub-options are checked, the owning checkbox is also checked, and if they’re all unchecked, the owning checkbox is unchecked. If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.

This can be seen in the below example (thanks to CSS Tricks for the inspiration). In this example we keep track of the ingredients we are collecting for a recipe. When you check or uncheck an ingredient’s checkbox, a JavaScript function checks the total number of checked ingredients:

  • If none are checked, the recipe name’s checkbox is set to unchecked.
  • If one or two are checked, the recipe name’s checkbox is set to .
  • If all three are checked, the recipe name’s checkbox is set to .

So in this case the state is used to state that collecting the ingredients has started, but the recipe is not yet complete.

  var overall = document.querySelector('input');
  var ingredients = document.querySelectorAll('ul input');

  overall.addEventListener('click', function(e) {
    e.preventDefault();
  });

  for(var i = 0; i < ingredients.length; i++) {
    ingredients.addEventListener('click', updateDisplay);
  }

  function updateDisplay() {
    var checkedCount = 0;
    for(var i = 0; i < ingredients.length; i++) {
      if(ingredients.checked) {
        checkedCount++;
      }
    }

    if(checkedCount === 0) {
      overall.checked = false;
      overall.indeterminate = false;
    } else if(checkedCount === ingredients.length) {
      overall.checked = true;
      overall.indeterminate = false;
    } else {
      overall.checked = false;
      overall.indeterminate = true;
    }
  }

Note: If you submit a form with an indeterminate checkbox, the same thing happens as if the checkbox were unchecked — no data is submitted to represent the checkbox.

Объект javascript checkbox

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

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

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

Пример: По щелчку на элементе флажок (checkbox) выводить диалоговое окно с сообщением для подтверждения: «Номер люкс очень дрогой. Вы уверены?». Скрипт описать .

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

Свойство checked

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

В скрипте:

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

В html:

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

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

Additional attributes

In addition to the common attributes shared by all elements, «» inputs support the following attributes:

Attribute Description
Boolean; if present, the checkbox is toggled on by default
A Boolean which, if present, indicates that the value of the checkbox is indeterminate rather than or
The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on

A Boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the ’s IDL attribute is updated.)

Note: Unlike other input controls, a checkboxes value is only included in the submitted data if the checkbox is currently . If it is, then the value of the checkbox’s attribute is reported as the input’s value.

Unlike other browsers, Firefox by default persists the dynamic checked state of an across page loads. Use the attribute to control this feature.

If the attribute is present on the element defining a checkbox, the checkbox’s value is neither nor , but is instead indeterminate, meaning that it’s state cannot be determined or stated in pure binary terms. This may happen, for instance, if the state of the checkbox depends on multiple other checkboxes, and those checkboxes have different values.

Essentially, then, the attribute adds a third possible state to the checkbox: «I don’t know.» In this state, the browser may draw the checkbox in grey or with a different mark inside the checkbox. For instance, browsers on macOS may draw the checkbox with a hyphen «-» inside to indicate an unexpected state.

The attribute is one which all s share; however, it serves a special purpose for inputs of type : when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the attribute. If the is not otherwise specified, it is the string by default. This is demonstrated in the section above.

Проверяем нажали checkbox через -> getElementsByClassName

При проверке нажат ли checkbox по классу, чуть-чуть отличается от верхнего примера!

class=»its_class»getElementsByClassNameмассив

Соберем весь код вместе:

<input type=»checkbox» class=»its_class»><i>Я согласен с <a href=»https://dwweb.ru/page/more/rules.html» target=»_blank»>Условиями</a></i>.

<button id=»submit_2″ >Проверить нажат ли checkbox</button>

<script>

document.getElementById(«submit_2»).onclick = function(){

if (document.getElementsByClassName(«its_class»).checked) { alert(«Чекбокс нажат -вариант №3»); } else { alert(«Чекбокс не нажат-вариант №3»); }

}

</script>


С этим читают