在 HTML 中隐藏复选框答案

【问题标题】：Hiding a Check Box in HTML在 HTML 中隐藏复选框
【发布时间】：2012-11-09 06:57:48
【问题描述】：

我有这两个复选框：

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

我怎样才能让第二个问题显示在页面上，只有当第一个问题被选择为是时？

提前致谢。

【问题讨论】：

我假设你的意思是 first 被选为是？是吗？
What have you tried?
@lanzz - 与此类似的东西：forums.yessoftware.com/posts.php?post_id=119322，但它对我没有用。

标签： javascript html

【解决方案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;
}

Check Fiddle

还是用jQuery更简单..

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

jQuery Fiddle

【讨论】：

纯 CSS 的解决方案还是比较好，仅作记录 :)
@Meursault：你从来没有说过你想要 IE 支持。
@MadaraUchiha - 这是真的。我忘了人们还在使用它。不过我明白你的意思，CSS 方法既好又简单。

【解决方案2】：

仅 CSS：

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

【讨论】：

【解决方案3】：

使用 jQuery，

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

    }
});

【讨论】：

我想知道为什么这被否决了，这样我就不会在再次发布答案时犯同样的错误。
我认为有些人习惯性地在问题没有提及时拒绝 jQuery 答案。
@keithxm23：我是反对者，由于这个答案的 MOAR JQUERY 性质，我反对。 stackoverflow.com/a/2826810/871050。 jQuery在这里没用，这可以用更简单更短代码的JavaScript来解决。
@Barmar：jQuery 是一个出色的框架，用于跨浏览器复杂的 DOM 和事件操作，具有出色的效果。然而，这个问题的目的并不需要它，它由简单的 DOM 操作组成，仅使用 JavaScript 就可以轻松完成（甚至仅使用 CSS！）
@MadaraUchiha 仅仅因为 jQuery 不是最好的解决方案并不意味着它应该被否决。我通常会将我的反对票保留给根本没有帮助的答案（他们要么误解了问题，要么包含错误信息）。这个讨论可能应该在 meta 上进行，而不是在这里。