用HTML隐藏复选框

Question

我有这两个复选框:

<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" />

如何在页面上显示第二个问题,仅当第一个问题被选为是时？

提前致谢.

Answer 1

你可以用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;
}?

检查小提琴

使用jQuery仍然更简单..

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

jQuery小提琴