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.

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.

• javascript
• html

• 1 I assume you meant the first one is selected as yes? Yes? – Ryan Bigg Commented Nov 8, 2012 at 22:33
• What have you tried? – lanzz Commented Nov 8, 2012 at 22:33
• @lanzz - Something similar to this: forums.yessoftware./posts.php?post_id=119322, but it didn't work out for me. – UndefinedReference Commented Nov 8, 2012 at 22:35

3 Answers 3

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

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}

With jQuery,

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

    }
});​