Главная / Веб-программирование / Проверка состояния чекбокса с помощью jQuery и JavaScript

Проверка состояния чекбокса с помощью jQuery и JavaScript

При разработке веб-проектов может потребоваться проверка checkbox checked jQuery, чтобы показать или скрыть определённую секцию веб-формы, какой-либо контент или осуществить какое-нибудь действие.

Например, можно включить или выключить кнопку «Далее» в зависимости от состояния отметки «Я согласен с пользовательским соглашением», позволяя зарегистрироваться только пользователям, отметившим чекбокс.

Аналогично можно активировать текстовое поле чекбоксом, когда пользователь хочет оставить отзыв на сайте.

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

Пример: как показать div, если отмечен чекбокс

В этом примере jQuery checkbox set checked («отмечен») — когда он отмечен, отображается элемент div. Если убрать отметку, div пропадает:

Проверка состояния чекбокса с помощью jQuery и JavaScript

Посмотреть демо и код онлайн

Полный код примера:

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(document).ready(function() {

$(‘#demochecked’).click(function() {

$("#chkdemo").toggle(this.checked);

});

});

</script>

<style>

.divcls

{

width:250px;

height: auto;

padding:20px;

background-color:#009700;

color:#fff;

font-size:15px;

}

</style>

</head>

<body>

<div class="divcls"><p>jQuery checked demo</p>

<input type="checkbox" checked id="demochecked"/>Tick / Uncheck the checkbox

<p id="chkdemo" style="color: yellow;font-size:20px;">The checkbox is checked!!</p>

</div>

</body>

</html>

В примере выше мы используем событие click для чекбокса и метод toggle, чтобы скрывать или показывать div. Используя jQuery, сделать это предельно просто. Рассмотрим ещё один пример.

Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса

В этом примере мы используем для jQuery input checkbox checked событие change. Когда ставится или убирается галочка, исполняется соответствующий код.

В демо, ссылка на который приведена ниже, мы скрываем элемент div, содержащий веб-форму. Форма сделана при помощи встроенных классов Bootstrap, поэтому вместе со ссылкой на библиотеку jQuery в разделе <head> также указан CSS-файл Bootstrap.

Отметьте или уберите галочку с чекбокса, чтобы скрыть или показать веб-форму. Для этого используются методы $.show и $.hide:

Проверка состояния чекбокса с помощью jQuery и JavaScript

Посмотреть демо и код онлайн

Полный код примера:

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script>

$(document).ready(function() {

$("#demochecked").change(function() {

if(this.checked) {

$("#chkboxdemo").show();

}

else

{

$("#chkboxdemo").hide();

}

})

});

</script>

<style>

.divcls

{

width:auto;

height: auto;

padding:20px;

background-color:#4D9999;

color:#fff;

font-size:15px;

}

</style>

</head>

<body>

<div class="divcls"><p>jQuery checkbox check/uncheck demo with a form</p>

<input type="checkbox" checked id="demochecked"/>Create Account? Yes / No

</div>

<div class="container" id="chkboxdemo">

<h1>Fill in the form below for creating account</h1>

<form class="form-horizontal" role="form">

<div class="form-group">

<label for="name1" class="col-sm-2 control-label">First Name:</label>

<div class="col-sm-4">

<input type="text" class="form-control" name="fname" placeholder="Your First Name">

</div>

</div>

<div class="form-group">

<label for="name1" class="col-sm-2 control-label">Last Name:</label>

<div class="col-sm-4">

<input type="text" class="form-control" name="lname" placeholder="Your Last Name">

</div>

</div>

<div class="form-group">

<label for="gender1" class="col-sm-2 control-label">Gender:</label>

<div class="col-sm-2">

<select class="form-control" name="ygender">

<option>Male</option>

<option>Female</option>

</select>

</div>

</div>

<div class="form-group">

<label for="email1" class="col-sm-2 control-label">Your Email:</label>

<div class="col-sm-5">

<input type="email" class="form-control" name="yemail" placeholder="Enter Email address">

</div>

</div>

<div class="form-group">

<label for="password1" class="col-sm-2 control-label">Password:</label>

<div class="col-sm-3">

<input type="password" class="form-control" name="ypassword" placeholder="(Must be 8 characters long)">

</div>

</div>

<div class="form-group">

<label for="address1" class="col-sm-2 control-label">Address:</label>

<div class="col-sm-5">

<input type="text" class="form-control" name="postaddress" placeholder="Where do you live?">

</div>

</div>

<div class="col-sm-offset-2 col-sm-5">

<p><input type="submit" class="btn btn-lg btn-block btn-success" value="Create My Account"></p>

</div>

</div>

</form>

</body>

</html>

Обратите внимание, как происходит jQuery checkbox checked проверка, и реализуются условия if/else для показа или скрытия формы.

Пример: проверка чекбокса с помощью JavaScript

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

В приведенном ниже примере для получения состояния чекбокса мы используем свойство JavaScript getElementById. Если чекбокс отмечен, показывается кнопка, если нет — кнопка скрывается:

Проверка состояния чекбокса с помощью jQuery и JavaScript

Посмотреть демо и код онлайн

Полный код примера:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>

.divcls

{

width:200px;

height: 80px;

padding:20px;

background-color:#4D9999;

color:#fff;

font-size:15px;

}

</style>

</head>

<body>

<div class="divcls"><input type="checkbox" checked id="demochecked"/>Show/Hide button</div>

<br />

<div class="col-sm-offset-2 col-sm-5" id="chkboxdemo">

<p><input type="submit" class="btn btn-lg btn-danger" value="Save Information"></p>

</div>

<script>

var chkstatus = document.getElementById(‘demochecked’);

var btnshowhide = document.getElementById(‘chkboxdemo’);

chkstatus.onchange = function() {

btnshowhide.hidden = this.checked ? false : true;

};

</script>

</body>

</html>

В примере, приведенном выше, JavaScript-код для jQuery checkbox checked проверки и скрытия/показа кнопки расположен над тегом </body>. В нём можно использовать ссылки, кнопки, параграфы, div и другие элементы.

Пример: использование метода $.on jQuery для проверки состояния чекбокса

В примере выше мы используем событие $.click напрямую. Можно также воспользоваться методом $.on с событием change для работы с чекбоксом.

В демо мы сделали HTML-таблицу, скрывающуюся в зависимости от состояния чекбокса. Здесь снова используется метод toggle — если таблица видима, она скрывается и наоборот:

Проверка состояния чекбокса с помощью jQuery и JavaScript

Посмотреть демо и код онлайн

Полный код примера, включая HTML, jQuery и CSS:

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#demochecked").on("change", function(){

$("#chkshowhide").toggle(this.checked);

});

});

</script>

<style>

.divcls

{

padding:20px;

background-color:#000080;

color:#fff;

font-size:15px;

}

/* таблицы*/

.demotbl {

border-collapse: collapse;

border: 1px dashed #859FB1;

}

.demotbl th{

border: 2px solid #96ADBC;

color: #3E5260;

padding:10px;

}

.demotbl td{

border: 1px dotted #232F36;

color: #002F5E;

padding:15px;

width:100px;

}

</style>

</head>

<body>

<div class="divcls"><input type="checkbox" name="mycheckbox" checkedid="demochecked"/>Show/Hide HTML Table</div>

<br />

<table class="demotbl" id="chkshowhide">

<tr>

<th>Product ID</th>

<th>Product Name</th>

<th>Product Quality</th>

<th>Product Quantity</th>

</tr>

<tr>

<td>prod-1</td>

<td>Wheat</td>

<td>Good</td>

<td>333 Bags</td>

</tr>

<tr>

<td>prod-2</td>

<td>Rice</td>

<td>Good</td>

<td>111 Bags</td>

<tr>

<td>prod-3</td>

<td>Sugar</td>

<td>Good</td>

<td>1200 Bags</td>

</tr>

</table>

</body>

</html>

Как видим, результат jQuery checkbox checked установки такой же, как и в первом примере.

Перевод статьи “How to know if checkbox is checked by jQuery/JavaScript?” был подготовлен дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Определение типа данных double в C, C++ и C#

Double – 64-разрядная переменная с плавающей запятой Тип double — это основной тип данных, который ...