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

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

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

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

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

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

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

checkbox-checked

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

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

<!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-checkbox-checked

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

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

<!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. Если чекбокс отмечен, показывается кнопка, если нет - кнопка скрывается:

JavaScript-checkbox-checked

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

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

<!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-checkbox-table

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

Полный код примера, включая 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?” был подготовлен дружной командой проекта Сайтостроение от А до Я.

27 мая 2017 в 17:10
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок