选中/取消选中复选框时如何隐藏/显示表单的一部分？
[英]How to hide/show part of a form when checkbox is checked/unchecked?
问题描述
I found a solution right here, works perfectly! 
我在这里找到了解决方案，效果很好！
This is my first attempt of trying to hide and show a section of a form with javascript. 这是我尝试用javascript隐藏和显示表单部分的第一次尝试。 I have 0 experience with javascript and tried this tutorial and this basic example on top of several other websites and tutorials over the last 2-3 hours, yet all fails to actually work. 我在javascript方面有0年的经验，并且在过去的2-3个小时内在其他几个网站和教程的顶部尝试了本教程和该基本示例 ，但所有方法都无法真正起作用。
I made a form with several radio's, a few text fields and a several checkboxes. 我制作了一个包含多个收音机，几个文本字段和几个复选框的表单。 I want some of these text fields to be invisible until you check a specific checkbox that will show them. 我希望其中一些文本字段不可见，直到您选中将显示它们的特定复选框。 I'd like to do this to several checkboxes for several text fields. 我想对多个文本字段的多个复选框执行此操作。
Example: You check the checkbox "Other" and a textfield appears to tell you to specify other in that field. 示例：选中复选框“其他”，然后出现一个文本字段，告诉您在该字段中指定其他。
I narrowed my code down to just a small test below, since I do not wish to share all questions and wanted a simple way to figure out how to get it to work. 我不想将所有问题都分享给我，而是希望通过一种简单的方法来弄清楚如何使其工作，下面将代码的范围缩小为一个小测试。 I put the to be hiden/shown section in a div because I thought that might help it, according to the "basic exmaple", but it is not necessary to be in a div for my form. 根据“基本示例”，我将“被隐藏/显示”部分放在div是因为我认为这可能会有所帮助，但是对于我的表单，不必在div中。
Thank you in advance for your reply and apologies for my noobness :) 在此先感谢您的答复，并为我的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>
Thank you! 谢谢！
4 个解决方案
解决方案1
2 2016-04-20 15:16:31
You can use CSS to achieve this, use psuedo selectors: 您可以使用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>
解决方案2
0 2016-04-20 15:25:46
Use $("#boxchecked").is(':checked') 使用$("#boxchecked").is(':checked')
$(document).ready(function(){
$("#boxchecked").click(function ()
{
if ($("#boxchecked").is(':checked'))
{
$("#hidden").show();
}
else
{
$("#hidden").hide();
}
});
});
Fiddle link : https://jsfiddle.net/san6gc9c/ 小提琴链接： https : //jsfiddle.net/san6gc9c/
解决方案3
0 已采纳 2016-04-20 15:27:18
Another option is using the prop function from jQuery: 另一个选择是使用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>
解决方案4
0
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.