Hiding a Check Box in HTML

Question

I have these two checkboxes:

<label for="cell">3. Do you currently have a cell phone? (Y/N)</label>
<input type="checkbox" name="cell" name="cell" id="cell" data-on="Yes" data-off="No" />

<label for="blackBerry">4.If YES, is the cell phone a BlackBerry? (Y/N)</label>
<input type="checkbox" name="blackBerry" name="blackBerry" id= "blackBerry" data-on="Yes" data-off="No" />

How can I get the second question to display on the page, ONLY when the first one is selected as Yes?

Thanks in advance.

@lanzz - Something similar to this: http://forums.yessoftware.com/posts.php?post_id=119322, but it didn't work out for me. — UndefinedReference, Nov 08 '12 at 22:35

score 6 · Accepted Answer · answered Nov 08 '12 at 22:57

You can do this using javascript

Javascript

var elem = document.getElementById('cell');

elem.addEventListener('click', function() {
      var divElem = document.getElementById('divPhone'); 
    if( this.checked){
        divElem.style.display = 'block'  ; 
    }
    else{
        divElem.style.display = 'none'  ;
    }
});

HTML

   <label for="cell">3. Do you currently have a cell phone? (Y/N)</label>
    <input type="checkbox" name="cell" name="cell"
           id="cell" data-on="Yes" data-off="No" />

    <div id="divPhone" class="hidden">
      <label for="blackBerry">4.If YES, is the cell phone a BlackBerry?
                                                          (Y/N)</label>
      <input type="checkbox" name="blackBerry" name="blackBerry" 
            id= "blackBerry" data-on="Yes" data-off="No" />
    </div>

.hidden 
{
    display: none;
}

Check Fiddle

It is still more simple using jQuery..

$('#cell').on('click', function() {
    if(this.checked){
       $('#divPhone').removeClass('hidden');
    }
    else{
       $('#divPhone').addClass('hidden');
    }        
});

jQuery Fiddle

The CSS only solution is still better, just for the record :) — Madara's Ghost, Nov 09 '12 at 08:21
@MadaraUchiha - That's true. I forget people still use it. I see your point though, the CSS method is nice and simple. — UndefinedReference, Nov 09 '12 at 17:59

score 3 · Answer 2 · answered Nov 08 '12 at 22:35

CSS only:

<label for="cell">3. Do you currently have a cell phone? (Y/N)</label>
<input type="checkbox" name="cell" id="cell" data-on="Yes" data-off="No" />
<div class="hide_if_no">
    <label for="blackBerry">4. If YES, is the cell phone a BlackBerry? (Y/N)</label>
    <input type="checkbox" name="blackBerry" id="blackBerry" data-on="Yes" data-off="No" />
</div>

CSS:

input[type=checkbox] ~ div.hide_if_no {display:none}
input[type=checkbox]:checked ~ div.hide_if_no {display:block}

score 0 · Answer 3 · answered Nov 08 '12 at 22:36

0

With jQuery,

$('#cell').change(function() {
    var c = this.checked;
    if (c) {
        $("#blackBerry").show();
    } else {
        $("#blackBerry").hide();

    }
});

answered Nov 08 '12 at 22:36

keithxm23

1,280
1
21
41

I'd like to know why this was down-voted please so that I do not make the same error in posting answers again. – keithxm23 Nov 08 '12 at 23:03
1

I think some people habitually downvote jQuery answers when the question didn't mention it. – Barmar Nov 08 '12 at 23:25
@keithxm23: I am the downvoter, and I downvoted because of the MOAR JQUERY nature of this answer. http://stackoverflow.com/a/2826810/871050. jQuery is useless here, this can be solved with JavaScript with easier and shorter code. – Madara's Ghost Nov 09 '12 at 18:01
@Barmar: jQuery is an excellent framework for cross-browser complex DOM and event manipulation, with a great touch of effect. It is however, not needed for the purpose of this question, which consists of simple DOM manipulation, which can be done easily with JavaScript alone (And even CSS alone!) – Madara's Ghost Nov 09 '12 at 18:03
@MadaraUchiha Just because jQuery isn't the best solution doesn't mean it deserves a downvote. I generally reserve my downvotes for answers that fail to help at all (they either misunderstood the question or they contain misinformation). This discussion probably should be taking place on meta, not here. – Barmar Nov 09 '12 at 18:23
@Barmar: let us continue this discussion [in chat](http://chat.stackoverflow.com/rooms/11/php) – Madara's Ghost Nov 09 '12 at 18:26

Hiding a Check Box in HTML

3 Answers3

Linked