Javascript 选中复选框后将显示输入字段。HTML

我有一个Twitter引导表单，它有6个垂直复选框。每次他们选中复选框时，我都需要一个输入表单字段。它可以以弹出窗口的形式出现，也可以是复选框右侧出现的内容。我想这是某种javascript函数，但我不知道如何实现。如有任何建议，将不胜感激。如果选中，每个文本框应该有一个弹出的字段，询问他们在这个特定领域有多少年的经验。此信息将通过$u 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>

求职
切割
缝纫
室内装潢
车架部
磨房
坐垫
任何

您可以在这里使用JavaScript来完成这项工作。单击并选中复选框（因为您也可以签出）时，将弹出一个对话框，其中包含您需要的所有输入字段。您可以根据需要更改对话框部分。但这部分是您的主要功能：

$(document).ready(function () {
  $('#chkBox').click(function () {
    if ($(this).is(':checked')) {
        // create input field
    } else {
       // if checkbox is not checked.. dont show input field 
    }
  });
});

有关如何使用对话框执行此操作的完整演示，请单击此链接并观察

---

请注意，您将需要jQuery（如果您想像我一样使用对话框，还需要jQuery UI）

有一个非常简单的零JavaScript版本，可以在中工作。它利用了伪类和。它可以使用任意数量的复选框

HTML:

如果愿意，可以使用

display:none

和

display:inline

而不是

visibility

属性

---

我提供的示例假设文本字段紧跟在标记中的复选框之后，但是可以使用某些变体的同级/子级选择器来选择它，无论它位于何处，只要它是复选框的同级或子级（直接或间接）。

尽管您已经找到了答案，我相信这对你的情况会更好，因为你说你会有6个复选框。这将根据每个复选框的名称为其动态创建输入字段，并在复选框未选中时将其删除

首先将此函数添加到每个复选框

onclick=“dynInput（this）；”

并将其添加到您希望显示输入的任何位置

<p id="insertinputs"></p>

然后简单地将这个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>

功能输出（cbox）{
如果（cbox.checked）{
var输入=document.createElement（“输入”）；
input.type=“text”；
var div=document.createElement（“div”）；
div.id=cbox.name；
div.innerHTML=“为“+cbox.name”显示的文本；
div.appendChild（输入）；
document.getElementById（“插入输入”）.appendChild（div）；
}否则{
document.getElementById（cbox.name）.remove（）；
}
}

---

JsFiddle here:

有很多方法可以做到这一点，我首先通过谷歌搜索“javascript动态添加输入”来了解如何操作DOM这里没有

java

…一个粗略的想法可能是创建一个文本框并将其显示属性设置为none，然后当选中任何复选框时，触发一个函数，并在其中使文本框可见！此外，您还需要至少发布HTML代码StackOverflow不是一个代码编写服务-有很多在线教程介绍如何使用javascript进行开发，以及如何编写代码以动态显示/隐藏控件。如果您所编写的代码存在特定问题（可以通过您提供的代码轻松复制），请返回usYou is right for my example，这样会更好。你知道有什么好的资源可以教像我这样的新手javascript，因为我显然需要它。很多人会建议学习jQuery而不是javascript。它基于JavaScript，并且更易于使用。不过，要完全理解它，最好先了解JavaScript。@WoodrowBarlow-不不不。。。W3C学校与W3C没有任何关系-他们在玩弄自己的名字，应该避免。。。请阅读@freefaller哇，我不知道。我删除了我的评论，因为我认为它是有害的。谢谢你启发我。不过，w3schools是学习网络技术的一个很好的资源。@WoodrowBarlow，我很感激你删除了这个评论，但我仍然怀疑w3schools是一个

好资源。w3schools比以前好了很多，但它仍然不是很好，但是，推荐它们的选择是yoursIts一个很好的答案，但我使用的是托管在cdn上的Twitter引导。所以我没有权限更改css。你可以把它放在你自己的css中。任何网页都可以有多个样式表——在发生冲突的情况下，最新声明的规则仍然有效。显然，您可能需要应用一些类，以免页面上的每个文本字段都不可见。但除此之外，这不应该与引导有任何冲突。如果我在他们单击“提交”时使用此方法，它是否会尝试提交整个页面，或者输入框中键入的内容将被保存，我可以继续我的表单？我对您的解决方案有困难。当我点击提交按钮时，它什么也不做。这是我的js[link]（fiddlehttp://jsfiddle.net/wild_card05/q6jehbrt/)任何帮助都将不胜感激。
<input type="checkbox" name="check1" onclick="dynInput(this);" />

<p id="insertinputs"></p>

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