Question

I found a solution right here, works perfectly!

这是我第一次尝试使用javascript隐藏和显示表单的一部分。我有0次使用javascript的经验，并且在过去的2-3个小时内，在其他几个网站和教程的基础上尝试了this tutorial和this basic example，但都无法实际运行。

我制作了一个包含多个收音机，一些文本字段和几个复选框的表单。我希望其中一些文本字段不可见，直到您选中将显示它们的特定复选框。我想对几个文本字段的几个复选框执行此操作。

示例：您选中复选框＆＃34;其他＆＃34;并显示一个文本字段，告诉您在该字段中指定其他内容。

我将我的代码缩小到下面的一个小测试，因为我不想分享所有问题，并想要一个简单的方法来弄清楚如何让它工作。我把隐藏/显示的部分放在div中，因为根据＆＃34;基本的例子＆＃34;我认为这可能会有所帮助，但是没有必要在{{1}中我的表格。

提前感谢您的回复并为我的noobness道歉：）

＆＃13;

div

＆＃13;

谢谢！

Answer 1

您可以使用CSS来实现此目的，使用psuedo选择器：

＆＃13;

.inputs {
  display: none;
}

.foo:checked + .inputs {
  display: initial;
}

＆＃13;

<form action="foo">
  <input type="checkbox" class="foo">
  <div class="inputs">
    bla blah inputs
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </div>
</form>

＆＃13;

Answer 2

使用$("#boxchecked").is(':checked')

$(document).ready(function(){
  $("#boxchecked").click(function ()
  {
      if ($("#boxchecked").is(':checked'))
      {
          $("#hidden").show();
      }
      else
      {
          $("#hidden").hide();
      }              
  });
});

小提琴链接：https://jsfiddle.net/san6gc9c/

Answer 3

另一种选择是使用jQuery中的prop函数：

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
    $(document).ready(function(){
        $("#boxchecked").click(function (){
            if ($("#boxchecked").prop("checked")){
                $("#hidden").hide();
            }else{
                $("#hidden").show();
            }              
        });
    });
</script>

Answer 4

<script>
$(document).ready(function () {
        $("#a").click(function () {
            if ($("#a").prop("checked")) {
                $("#b").hide();
                $("#c").hide();
                $("#d").hide();
                $("#e").hide();
            } else {
                $("#b").show();
                $("#c").show();
                $("#d").show();
                $("#e").show();
            }
        });
    });
<script>

<div><input id="a" type="checkbox"></div>
<div><input id="b" type="checkbox"></div>
<div><input id="c" type="checkbox"></div>
<div><input id="d" type="checkbox"></div>
<div><input id="e" type="checkbox"></div>

选中/取消选中复选框后，如何隐藏/显示表单的一部分？

4 个答案: