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

Question

这是我尝试用javascript隐藏和显示表单部分的第一次尝试。 我在javascript方面有0年的经验，并且在过去的2-3个小时内在其他几个网站和教程的顶部尝试了本教程和该基本示例，但所有方法都无法真正起作用。

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

示例：选中复选框“其他”，然后出现一个文本字段，告诉您在该字段中指定其他。

我不想将所有问题都分享给我，而是希望通过一种简单的方法来弄清楚如何使其工作，下面将代码的范围缩小为一个小测试。 根据“基本示例”，我将“被隐藏/显示”部分放在div是因为我认为这可能会有所帮助，但是对于我的表单，不必在div中。

在此先感谢您的答复，并为我的no昧致歉：)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> $("#yourCheckboxID").click(function () { if ($("#boxchecked").attr("checked")) { $("#hidden").show(); } else { $("#hidden").hide(); } }); </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <p> <label> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="box" /> Main.</label> <br /> <label> <input type="checkbox" value="checkbox" name="CheckboxGroup1" id="boxchecked" /> Other.</label> <br /> </p> </form> <div id="hidden">Can you see this?</div> </body> </html>

谢谢！

Answer 1

您可以使用CSS来实现，请使用psuedo选择器：

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

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

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 个解决方案

解决方案1
2 2016-04-20 15:16:31

解决方案2
0 2016-04-20 15:25:46

解决方案3
0 已采纳 2016-04-20 15:27:18

解决方案4
0

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

问题描述

4 个解决方案

解决方案1 2 2016-04-20 15:16:31

解决方案2 0 2016-04-20 15:25:46

解决方案3 0 已采纳 2016-04-20 15:27:18

解决方案4 0

解决方案1
2 2016-04-20 15:16:31

解决方案2
0 2016-04-20 15:25:46

解决方案3
0 已采纳 2016-04-20 15:27:18

解决方案4
0