13.01.2022 в 20:12

Как проверить/установить checkbox с помощью jQuery - JavaScript

В этом кратком руководстве вы узнаете, как выбирать checkbox элементы на странице и проверять их в JavaScript с помощью Vanilla JavaScript и jQuery.

Мы будем работать с этой простой настройкой checkbox:

<h1>Check/Select Checkbox</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore">
<label for="takenBefore">Yes</label>

<button id="button"> Check Checkbox </button>

element.checked = true

Самый простой способ проверить или установить checkbox — явно установить для поля checked значение true:

// Get Element
checkBox = document.getElementById('takenBefore');
// Set the `checked` field to `true`
checkBox.checked = true

Чтобы продемонстрировать это, давайте прикрепим прослушиватель событий к кнопке, которая затем программно выбирает/проверяет checkbox для нас. Это хороший пример, но он действительно служит делу — вы будете проверять/устанавливать флажок на основе какого -либо действия пользователя:

document.getElementById('button').addEventListener('click', event => {
	checkBox = document.getElementById('takenBefore');
	checkBox.checked = true
});

Это приводит к:

$('#element')[0].checked = true

Примечание: jQuery — это популярная библиотека JavaScript, присутствующая во многих проектах по всему миру. Благодаря небольшому весу и функциям, которые расширяют объем встроенных возможностей JavaScript, он стал основным продуктом.

Мы можем использовать синтаксис выбора jQuery вместо чистого JavaScript, чтобы упростить как выбор элемента, так и прослушиватель событий, прикрепленный к другим элементам, которые приводят к выбору флажка. Если у вас уже есть jQuery в вашем проекте, в итоге получится более простой код, хотя, если это все, что вам нужно сделать, вероятно, не стоит импортировать библиотеку только для этого.

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
</script>

Теперь, когда установлен jQuery, вы можете просто установить свойство checked как раньше, но с более простым синтаксисом:

$('#takenBefore')[0].checked = true

Здесь мы получаем объект jQuery, а не базовый элемент с помощью селектора, следовательно, нам придется подписать его и получить базовый объект для доступа к свойству checked с помощью [0].

Точно так же, если мы хотим запустить этот код на основе какого-либо другого действия, например нажатия кнопки:

$('#button').on('click', function() {
	$('#takenBefore')[0].checked = true
});

Этот синтаксис довольно проще, чем тот, который мы использовали ранее, хотя функционально он эквивалентен:

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

$('#element').prop("checked", true)

Функция prop() принимает набор аргументов "ключ-значение" - имя свойства, к которому мы хотим получить доступ, и значение, которое мы хотим ему присвоить. Сам метод выполняет проверку, которая не выполняется, когда мы явно устанавливаем свойство как раньше true.

Вообще говоря, если вы уже используете jQuery, рекомендуется использовать prop(), а не явно задавать свойство, из-за дополнительных преимуществ проверки.

При этом установить checkbox для проверки/выбора так же просто, как:

$('#takenBefore').prop('checked', true);

И снова, поскольку обычно он запускается по какому-то другому событию:

$('#button').on('click', function() {
	$('#takenBefore').prop('checked', true);
});

$('#element').attr("checked", true)

В более старых версиях jQuery, которые вы можете быть вынуждены использовать из-за ограничений проекта, функция prop() предшествовала функции attr(), которая задавала атрибуты элементов.

В этом контексте он работает примерно так же, как prop():

$('#takenBefore').attr('checked', true);