Открыть или скрыть блок при выборе чекбокса jQuery

Опубликовано: 01 Июл 2017

Частый пример в случае с интернет-магазинами. При переключении checkbox нужно открыть / скрыть блок div с дополнительной информацией. Смотрим пример кода:

Код HTML

<input type="checkbox" name="public" id="public" value="yes">
<div id="hide" style="display:none;">
   Содержимое скрытого блока
</div>

Создали кнопку. Присвоили ей id public. Ниже создали скрытый блок, который и будет открываться при выделении чекбокса.

Код JS

<script type="text/javascript">
$(document).ready(function(){
 $("input#public").change(function(){
  if ($(this).attr("checked")) {
      $('#hide').fadeIn().show();
      return;
  } else {
      $('#hide').fadeOut(300); 
  }
 });
})
</script>

А в этом фрагменте кода происходит проверка checkbox - если выделен, то открываем, если нет, то скрываем.

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


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: