Question

我有一段像这样的HTML代码：

  <p>Do you want a graph ?</p>
                <div class="selection spacing clearfix">
                    <input type="radio" name="graph" value="Yes">Yes<br> <input
                        type="radio" name="graph" value="No">No<br>
                </div>

和下一部分是这样的：

<p>Which graphs do you want ?</p>           

                 <input type="checkbox" name="graphs" value="Blocker">Blocker<br>
                 <input type="checkbox" name="graphs" value="Critical">Critical<br>
                 <input type="checkbox" name="graphs" value="Major">Major<br>
                 <input type="checkbox" name="graphs" value="Minor">Minor<br>

我希望只有当用户在第一部分中单击“是”时才会显示html的第二部分。我正试图谷歌它，但没有获得太多的信息。任何人都可以帮助我吗？

Answer 1

  <p>Do you want a graph ?</p>
  <div class="selection spacing clearfix">
    <input type="radio" name="graph" value="Yes" class="js-show">Yes<br> 
    <input type="radio" name="graph" value="No" class="js-hide">No<br>
  </div>

  <div class="js-place">
    <p>Which graphs do you want ?</p>           
    <input type="checkbox" name="graphs" value="Blocker">Blocker<br>
    <input type="checkbox" name="graphs" value="Critical">Critical<br>
    <input type="checkbox" name="graphs" value="Major">Major<br>
    <input type="checkbox" name="graphs" value="Minor">Minor<br>
  </div>

现在使用jQuery javascript

var div = $(".js-place");
$(".js-show").click(function(){
  div.show();
});

$(".js-hide").click(function(){
  div.hide();
});

Answer 2

将第二部分包裹在某个块元素中，并在其上添加 display：none 属性。

<div id="#checkBoxDiv" style="display:none">
<p>Which graphs do you want ?</p>           

                 <input type="checkbox" name="graphs" value="Blocker">Blocker<br>
                 <input type="checkbox" name="graphs" value="Critical">Critical<br>
                 <input type="checkbox" name="graphs" value="Major">Major<br>
                 <input type="checkbox" name="graphs" value="Minor">Minor<br>
</div>

然后在选择单选按钮'是'时使用JS或jquery，您可以将该属性更改为 display：block ，它将显示在屏幕上

$('#checkBoxDiv').css('display','block');

Answer 3

实际上这只能用css完成。

如果你愿意，请投票......

检查一下：

http://jsfiddle.net/nhwqD/

的CSS：

div {
display: none;
}
input[type="radio"]:checked+div {
display: block;
}

HTML：

<input type="radio" name="graph" value="no" />
<input type="radio" name="graph" value="yes" />
<div> I am here only because u wanna graphs </div>

执行操作后显示页面的一部分

3 个答案: