Скрыть div на основе переключателя выбора в форме - PullRequest
Новая
       4

Скрыть div на основе переключателя выбора в форме

0 голосов
/ 12 апреля 2019

У меня есть форма, где вы должны выбрать между двумя input type="radio", один говорит да , а другой говорит нет .
Я хочу сделать div, которыйотображается в форме исчезают при выборе параметра нет .Я попытался скопировать некоторые JS из других постов, которые я прочитал в Интернете, но у меня ничего не получалось.
Может кто-нибудь сказать мне код, который я должен использовать?Это может быть JS, PHP или CSS.

Вот мой код: 

<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="yes" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="no" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>

<div id="hello">
You clicked on NO, so this div disappears.    
</div>

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

Вы можете достичь этого с помощью чистого CSS.Не знаю, подходит ли мое решение, потому что я не знаю, как устроена остальная часть вашей страницы. 

.form-radio {
  position: relative;
  padding-bottom: 2rem;
}

input#no ~ #floatingDescription  {
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: block;
}

input#no:checked ~ #floatingDescription {
  display: none;
}
<!DOCTYPE html>
<hml>

<body>
  <div class="form-radio">
    <label for="sons" class="radio-label">Question:</label>
    <div class="form-radio-item">
      <input type="radio" name="answer" id="yes" checked>
      <label for="hsi">YES</label>
    </div>
    <div class="form-radio-item">
      <input type="radio" name="answer" id="no">
      <label for="hno">NO</label>
      <div id="floatingDescription">You clicked on NO, so this div disappears.</div>
    </div>
  </div>

</body>
</html>
1 голос
/ 12 апреля 2019

Вам необходимо добавить прослушиватели событий на ваши входы, а также вы должны изменить имя обеих радиокнопок на одно и то же.Я использовал inputs ниже.Затем я переключаю стиль display на элементе #hello в зависимости от того, какой выбор был выбран. 

const hello = document.getElementById('hello');

document.getElementById('yes')
  .addEventListener('click', function() {
    hello.style.display = null;
  });
  
document.getElementById('no')
  .addEventListener('click', function() {
    hello.style.display = 'none';
  });
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="inputs" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="inputs" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>

<div id="hello">
You clicked on NO, so this div disappears.    
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...