Проверка состояния чекбокса с помощью jQuery и JavaScript
При разработке веб-проектов может потребоваться проверка checkbox checked jQuery, чтобы показать или скрыть определённую секцию веб-формы, какой-либо контент или осуществить какое-нибудь действие.
Например, можно включить или выключить кнопку «Далее» в зависимости от состояния отметки «Я согласен с пользовательским соглашением», позволяя зарегистрироваться только пользователям, отметившим чекбокс.
Аналогично можно активировать текстовое поле чекбоксом, когда пользователь хочет оставить отзыв на сайте.
В этой статье мы покажем, как, используя jQuery или JavaScript можно проверить состояние чекбокса и на основании этого осуществить какие-либо действия.
Пример: как показать div, если отмечен чекбокс
В этом примере jQuery checkbox set checked («отмечен») — когда он отмечен, отображается элемент div. Если убрать отметку, div пропадает:
Посмотреть демо и код онлайн
Полный код примера:
<!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:
Посмотреть демо и код онлайн
Полный код примера:
<!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. Если чекбокс отмечен, показывается кнопка, если нет - кнопка скрывается:
Посмотреть демо и код онлайн
Полный код примера:
<!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 — если таблица видима, она скрывается и наоборот:
Посмотреть демо и код онлайн
Полный код примера, включая 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 установки такой же, как и в первом примере.
Комментарии