Javascript 选中复选框后会出现输入字段。HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25870898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input field appear after selecting a check box. HTML
提问by user3487244
I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
我有一个 Twitter Bootstrap 表单，它有 6 个垂直复选框。每次他们选择一个复选框时，我都需要有一个输入表单字段。它可能是弹出窗口的形式，也可能是出现在复选框右侧的东西。我认为这是某种 javascript 函数，但我不知道该怎么做。任何建议将不胜感激。如果选中，每个文本框都应该有一个弹出的字段，询问他们在这个特定领域有多少年的经验。这将通过 $_POST 变量收集信息。所以每个复选框弹出窗口都应该有自己的唯一名称，以便我可以发布它。
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>
采纳答案by Spencer May
Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
尽管您已经找到了答案，但我相信这更适合您的情况，因为您说将有 6 个复选框。这会通过名称为每个复选框动态创建输入字段，并在未选中复选框时将其删除。
First add this function to each checkbox onclick="dynInput(this);"
首先将此功能添加到每个复选框 onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
并将其添加到您希望输入显示的任何位置。
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
然后只需将此 javascript 函数添加到您的头脑中。
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/
JsFiddle在这里：http: //jsfiddle.net/brL6gy7r/
回答by Dennis Anderson
You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
您可以在此处使用 JavaScript 来完成这项工作。当复选框被点击并选中时（因为你也可以签出。）一个对话框将弹出你想要的所有输入字段。您可以根据需要更改对话框部分。但这部分是您的主要功能：
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
有关如何使用对话框执行此操作的完整演示，请单击此链接并观察
http://jsfiddle.net/Runman44/5vy1m233/
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)
请注意，您将需要 jQuery（如果您想像我一样使用对话框，还需要 jQuery UI）
回答by Woodrow Barlow
There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checkedpseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
有一个零 JavaScript 版本，它非常简单，适用于所有主要浏览器。它利用了:checked伪类和邻接选择器。它适用于任意数量的复选框。
HTML:
HTML：
<input type="checkbox" />
<input type="text" />
CSS:
CSS：
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
If you prefer, you can use display:noneand display:inlinerather than the visibilityproperty.
如果您愿意，可以使用display:noneanddisplay:inline而不是visibility属性。
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.
我提供的示例假定文本字段紧跟在标记中的复选框之后，但是可以使用兄弟/子选择器的一些变体来选择它，无论它在哪里，只要它是兄弟或子（直接或间接）复选框。
