аватар Автор: Сергей Касаткин | 16 апреля 2014 17:33

Статьи / jQuery /

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

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

Демонстрация Скачать исходники


Спасибо за внимание!
 



Похожие статьи


Комментарии к статье (vk.com)