Checked javascript type text

Input Checkbox checked Property

The checked property sets or returns the checked state of a checkbox. This property reflects the HTML checked attribute.

Browser Support

Syntax

Property Values

Technical Details

Return Value:	A Boolean, returns true if the checkbox is checked, and false if the checkbox is not checked

More Examples

Example

Find out if a checkbox is checked or not:

Example

Use a checkbox to convert text in an input field to uppercase:

Example

Several checkboxes in a form:

var coffee = document.forms[0];
var txt = «»;
var i;
for (i = 0; i < coffee.length; i++) if (coffee[i].checked) txt = txt + coffee[i].value + " ";
>
>
document.getElementById(«order»).value = «You ordered a coffee with: » + txt;

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Checkbox Checked — Проверка Состояния Чекбокса ✔️

В данной статье мы разберём различные способы проверки состояния чекбоксов. Это необходимо для эффективной работы с элементами форм.

1. Проверка checkbox на checked — метод .is()

Сначала научимся определять при клике состояние текущего checkbox (checked / unchecked).

$(".checkbox").on("click", function () < if ($(this).is(":checked")) < // checkbox checked >else < // checkbox unchecked >>)

Т.о. при клике на чекбокс, мы отлавливаем событие click у текущего checkbox $(this) и с помощью метода .is() мы проверяем наличие псевдокласса :checked.

2. Проверка checkbox/radio на состояние (выбран/не выбран) — метод .prop()

Воспользуемся методом .prop() для проверки состояния checkbox или radio input.

Данный код возвращает true или false при нажатии на чекбокс или радио input.

Чтобы сразу выполнять необходимые действия, добавим оператор if :

2.1 Отметить / снять checked

Также при помощи метода .prop() можно отметить (или снять состояние checked).

// добавим checked $(".checkbox").prop("checked", true) // удалим состояние checked $(".checkbox").prop("checked", false) // добавим состояние checked для всех чекбоксов $("input:checkbox").prop("checked", true); // удалим checked для всех чекбоксов $("input:checkbox").prop("checked", false);

2.2 Деактивация чекбокса

Чтобы деактивировать/активировать чекбокс, воспользуйтесь следующим кодом:

// отключаем чекбокс $(".checkbox").prop("disabled", true) // включаем чекбокс $(".checkbox").prop("disabled", false)

3. Имитация клика по чекбоксу

Чтобы имитировать клик по чекбоксу, воспользуйтесь следующим кодом:

4. Найти все выбранные checkbox / radio — селектор :checked

При помощи селектора :checked найдём все выбранные checkbox / radio.

Теперь рассмотрим пример с input type=»checkbox» , это также отлично работает и с radio input.

const inputs = document.querySelectorAll("input"); const container = document.querySelector(".container"); inputs.forEach(el => < el.addEventListener("click", () => < container.textContent = ""; let input_checks = document.querySelectorAll("input:checked"); input_checks.forEach(el_checked =>< container.insertAdjacentHTML("beforeend", el_checked.value); >); >); >);

5. Подсчёт количества выбранных чекбоксов

Чтобы узнать количество выбранных checkbox, будем использовать свойство .length :

const myCount = function () < $("#output_field").html($(".count-checked:checked").length + " чекбоксов выбрано вами."); >; myCount(); $("input").on("click", myCount);

6. Запрет отправки формы без выбора чекбокса

Создадим форму, отправить данные которой пользователь сможет только после выбора checkbox.

Работа с JavaScript. Проверка checkbox на checked :

$("#checked").on("change", function () < if ($("#checked").prop("checked")) < $(".form__submit").attr("disabled", false); >else < $(".form__submit").attr("disabled", true); >>);

Как вы помните из 2 примера, .prop(«checked») возвращает true или false — то что нам и нужно.

const checkbox = document.getElementById("checked"); const btn_submit = document.querySelector(".form__submit"); checkbox.addEventListener("change", () => < if (checkbox.checked) < btn_submit.removeAttribute("disabled"); >else < btn_submit.setAttribute("disabled", true); >>);

7. Массив значений выбранных чекбоксов

Получим массив значений из выбранных чекбоксов.

$(".array-checked").on("change", function () < const arrayChecked = []; $(".array-checked:checked").each(function () < arrayChecked.push($(this).val()); >); console.log(arrayChecked); >);

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

8. Проверка checkbox на checked на чистом JavaScript

Используя чистый JavaScript определим состоние чекбокса.

const checkbox = document.querySelector(".checkbox"); checkbox.addEventListener("change", function () < if (this.checked) < console.log("checked"); >else < console.log("unchecked"); >>)

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 3 )

«if ( $(this).prop(‘checked’, true) )» Ты ещё раз проверь. точно уверен, что это проверка? Ибо у меня это работает именно как «установить свойство checked в значение true», что в общем-то логично абсолютно. Ни о какой проверке в этакой конструкции речи не может быть. Если использовать это на нажатие кнопки «отправить сообщение». Как минимум. Следовательно, такая проверка является в корне ошибочной.

Источник

JavaScript урок12. Объектная модель документа (продолжение): идентификация в javascript checkbox и radio

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

1 способ (через name ):
В скрипте:

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

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

2 способ (через id ):
В скрипте:

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

body onload="check()"> input type="checkbox" id="ch1">пункт1br> input type="checkbox" id="ch2">пункт2br>

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

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

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

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

Рассмотрим пример использования радиокнопок:
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; // 1-й способ document.f1.r1[0].checked=true; // 2-й способ document.f1['r1'][0].checked=true; // 3-й способ }

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

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

1 способ:
Скрипт:

function fanc(){ idr1.checked=true; }

input type="radio" name="r1" id="idr1">пункт1br> input type="radio" name="r1" id="idr2">пункт1br> input type="button" onClick ="fanc()" value="отметить">

2 способ:
Скрипт:

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

form name="f1"> input type="radio" name="r1">пункт1br> input type="radio" name="r1">пункт1br> input type="button" onClick ="fanc()" value="отметить"> /form>

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

Источник