Форум

Tiesto · #1 (**permalink**) 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), другой див должен появляться, а при переходе на третий чекбокс, он должен скрываться, изначально он скрыт.

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

рони · #2 (**permalink**) 09.08.2017, 12:49

Сообщение от Tiesto

Есть див с тремя чекбоксами(radio):

Сообщение от Tiesto

изначально он скрыт.

как можно нажать на чекбокс в скрытом див?

Tiesto · #3 (**permalink**) 09.08.2017, 13:26

Сообщение от рони

как можно нажать на чекбокс в скрытом див?

Изначально скрыт див, который должен появляться при нажатии на эти два чекбокса и пропадать на третий, <div class="radio"> не скрывается никак. Извиняюсь, неправильно выразился, исправил.

Nexus · #4 (**permalink**) 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']();
});

рони · #5 (**permalink**) 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 · #6 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript