Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как при нажатии на один чекбокс скрывать блок, а на другой показывать.. (https://javascript.ru/forum/dom-window/70090-kak-pri-nazhatii-na-odin-chekboks-skryvat-blok-na-drugojj-pokazyvat.html)

Tiesto 09.08.2017 12:33
Как при нажатии на один чекбокс скрывать блок, а на другой показывать..
 
Всем привет, не могу найти решение данного вопроса. Теперь подробнее!

Есть див с тремя чекбоксами(radio):
Код:
<div class="radio">
<label>
<input type="radio" name="1" id="optradio" value=""  checked="checked">
Нет
</label>
<label>
<input type="radio" name="1" id="optradio2" value="">
Да
</label>
<br>
<label>
<input type="radio" name="1" id="optradio3" value="">
Да, но.. 
</label>
</div>
Так вот, при нажатии на два из них(#optradio2,#optradio3), другой див должен появляться, а при переходе на третий чекбокс, он должен скрываться, изначально он скрыт.

Буду признателен за помощь.

рони 09.08.2017 12:49
Цитата:
Сообщение от Tiesto
Есть див с тремя чекбоксами(radio):
Цитата:
Сообщение от Tiesto
изначально он скрыт.
как можно нажать на чекбокс в скрытом див?

Tiesto 09.08.2017 13:26
Цитата:
Сообщение от рони (Сообщение 461078)
как можно нажать на чекбокс в скрытом див?
Изначально скрыт див, который должен появляться при нажатии на эти два чекбокса и пропадать на третий, <div class="radio"> не скрывается никак. Извиняюсь, неправильно выразился, исправил.

Nexus 09.08.2017 15:17
Tiesto,
var $div=$('#hidden_div');//«hidden_div» - ID скрытого div'а
$('#optradio,#optradio2,#optradio3').change(function(){
    var $t=$(this);
    if($t.is(':checked'))
        $div[$t.attr('id').substr(-1)!=3?'show':'hide']();
});

рони 09.08.2017 15:51
Tiesto,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">.slider{
    display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$('[name="1"]').on("click", function() {
$(".slider").toggle(this.id != "optradio")
})
});
  </script>
</head>

<body>
<div class="radio">
<label>
<input type="radio" name="1" id="optradio" value=""  checked="checked">
Нет
</label>
<label>
<input type="radio" name="1" id="optradio2" value="">
Да
</label>
<br>
<label>
<input type="radio" name="1" id="optradio3" value="">
Да, но..
</label>
</div>
<div class="slider">slider</div>

</body>
</html>

Dilettante_Pro 09.08.2017 18:04
Вариант без id с value
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">.slider{
    display: none;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
   $('[name="1"]').on("click", function() {
      $(".slider").css('display',this.value)
   })
});
  </script>
</head>

<body>
<div class="radio">
<label>
<input type="radio" name="1"  value="none"  checked="checked">
Нет
</label>
<label>
<input type="radio" name="1"  value="block">
Да
</label>
<br>
<label>
<input type="radio" name="1"  value="block">
Да, но..
</label>
</div>
<div class="slider">slider</div>

</body>
</html>


Часовой пояс GMT +3, время: 19:06.