javascript - 选中复选框后出现输入字段。 HTML

Question

我有一个包含 6 个垂直复选框的 Twitter Bootstrap 表单。每次他们选择一个复选框时，我都需要一个输入表单字段。它可以是弹出窗口的形式，也可以是出现在复选框右侧的东西。我认为这是某种 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>

Answer 1

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

首先给每个复选框添加这个函数onclick="dynInput(this);"

<input type="checkbox" name="check1" 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>

JsFiddle 在这里:http://jsfiddle.net/brL6gy7r/