Всплывающий label

175

30 октября 2018, 16:10

На странице есть 2 чекбокса

<p><input type="radio" name="RadioBtn" id="RB" value="payeer" /><label for="RB">Payyer</label></p>
    <p><input type="radio" name="RadioBtn" id="RB" value="advcash" /><label for="RB">AdvCash</label></p>

Как мне сделать так, чтобы при выборе каждого, рядом выскакивал label с каким-то текстом(подсказкой)? Спасибо

Answer 1

id уникально
для for label меняем на соот. id
чтобы показать подсказку используем псевдокласс :checked

label span { 
  display: none; 
  color: #f00; 
} 
 
[id^=RB]:checked~label span { 
  display: inline-block; 
}

<p><input type="radio" name="RadioBtn" id="RB1" value="payeer"><label for="RB1">Payyer <span>Tooltip</span></label></p> 
<p><input type="radio" name="RadioBtn" id="RB2" value="advcash"><label for="RB2">AdvCash <span>Tooltip</span></label></p>

Answer 2

Как один из вариантов: Присвойте каждому элементу id, и с помощью js или jquery, по событию onclick, прячьте и показывайте контент или блок с информацией.