How to make a tag appear when you click a checkbox

Question

How to make this tag <h3> appear when a checkbox is clicked? Right now it is 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  
}

You can't do it without javascript for a *before* sibling. If `.bark` was **after** the checkbox you could do `:checked + .bark { visibility: visible; }` Since you didn't tag it javascript I didn't answer directly. — Bill Criswell, Dec 16 '15 at 04:19
That was my problem. I wanted it in css only. This explains. — Deke, Dec 16 '15 at 04:26
Possible duplicate of [Is there a “previous sibling” CSS selector?](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — Abhitalks, Dec 16 '15 at 10:53

score 10 · Answer 1 · answered Dec 16 '15 at 04:34

10

.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>

answered Dec 16 '15 at 04:34

yjs

692
3
11

This repeats the same error the OP had in their question, namely the stray `` in the markup. – Mr Lister Dec 21 '15 at 13:11

ketan · Answer 2 · 2015-12-16T09:41:46.393

4

Without using 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 should put h3 after input. And use + sign to make h3 visible.

Working Fiddle

edited Dec 16 '15 at 09:41

answered Dec 16 '15 at 04:25

ketan

19,129
42
60
98

This repeats the same error the OP had in their question, namely the stray `` in the markup. – Mr Lister Dec 21 '15 at 13:11

score 1 · Answer 3 · answered Dec 16 '15 at 04:40

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

score 1 · Answer 4 · answered Dec 21 '15 at 13:25

As the other answers say, you will have to put the checkbox above the h3.
However, if you really want the text "Hear a dog" to appear below the h3, you will have to change a bit more in both the HTML and the 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 uses the fact that a label for a checkbox does not necessarily have to appear next to the checkbox itself. So we put the checkbox above the h3 and the label below it.
I also added some decoration to the label to make it look like the checkbox is in that location, but that's just cosmetic; you don't have to use it.

This is the correct answer! BTW love the tick symbol :) I'd also add `user-select: none` to the `label` element, but that's cosmetics. — Vucko, Dec 21 '15 at 13:33
This definitely works, but there are way shorter answers that are also correct making this answer obsolete. — OneStig, Jan 12 '16 at 01:06
@StigCoder04 That's your opinion. This answer mostly resembles the OP's output (with the h3 above the label). — Mr Lister, Jan 12 '16 at 07:45

score -1 · Answer 5 · answered Dec 16 '15 at 04:23

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>

Digpal Singh · Answer 6 · 2015-12-16T08:46:16.143

-1

    <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 include any jquery min js and try this code :

edited Dec 16 '15 at 08:46

answered Dec 16 '15 at 04:23

Digpal Singh

166
1
5

How is this supposed to work? This actually makes the checkbox invisible if you click on the h3. – Mr Lister Dec 21 '15 at 13:10

How to make a tag appear when you click a checkbox

6 Answers6