How to create a tag when you click the checkbox

Question

How to make this <h3> appear when I click on a checkmark? He is now hidden.

 <h3 class="bark">Bark Bark</h3> <input type="checkbox" class="title">Hear a dog</input> 

CSS

 .bark{ visibility: hidden } input[type="checkbox"]:checked { visibility: visible } 

Answer 1

 .bark{ visibility: hidden } input[type="checkbox"]:checked + h3.bark { visibility: visible } 

 <input type="checkbox" class="title">Hear a dog</input> <h3 class="bark">Bark Bark</h3> 

Answer 2

Without using a scripting language, there is one trick:

 .bark{ visibility: hidden; } input[type="checkbox"]:checked + .bark { visibility: visible; } 

 <input type="checkbox" class="title">Hear a dog</input> <h3 class="bark">Bark Bark</h3> 

You must put h3 after input . And use the + sign to make h3 visible.

Working script

Answer 3

 function checkInput(cbox) { if (cbox.checked) { document.getElementById('check_box').style.visibility='visible'; } else{ document.getElementById('check_box').style.visibility='hidden'; } } 

 #check_box{ visibility: hidden; } 

 <h3 id="check_box">Bark Bark</h3> <input type="checkbox" class="title" onclick="checkInput(this);">Hear a dog 

Answer 4

As the other answers say, you need to check the box above h3.
However, if you really want the text “Hear the dog” to appear under h3, you will have to change it a bit in both HTML and CSS.

 #checkbark { display: none } .bark { visibility: hidden } #checkbark:checked + .bark { visibility: visible } label[for='checkbark'] { cursor: pointer; } label[for='checkbark']::before { content: '\2610 '; } #checkbark:checked ~ label[for='checkbark']::before { content: '\2611 '; } 

 <input type="checkbox" class="title" id="checkbark"> <h3 class="bark">Bark Bark</h3> <label for="checkbark">Hear a dog</label> 

This snippet exploits the fact that the label for a flag does not have to appear next to this flag. Therefore, we put a flag above h3 and an inscription below.
I also added some decoration to the label to make it look like a flag in this place, but it's just cosmetic; you do not need to use it.

Answer 5

HTML

 <h3 class="bark" id="bark" onclick="showtag()">Bark Bark</h3> <input type="checkbox" class="title">Hear a dog</input> 

JAVASCRIPT

 <script language="javascript"> function showtag() { var showme = document.getelementbyid("bark"); showme.style.visibility = "visible"; } </script> 

Answer 6

  <h3 class="bark"><a href="#" id="id1">Bark Bark</a></h3> <input type="checkbox" class="title">Hear a dog</input> <script>$('#id1').click(function () { if($(".title").is(':checked')){ $('.title').css('visibility','visible'); }else{ $('.title').css('visibility','hidden'); } });</script> 

Please enable any jQuery min js and try this code:

Answer 7

Using jQuery you can do

 if ($('.title:checked')){ $('.bark').show(); }