Question

我有一个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>

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/

Answer 2

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

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

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

http://jsfiddle.net/Runman44/5vy1m233/

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

Answer 3

有一个简单的零JavaScript版本，可以在all major browsers中使用。它利用了:checked伪类和adjacency selector。它适用于任意数量的复选框。

HTML：

<input type="checkbox" />
<input type="text" />

CSS：

input[type=text] {
    visibility:hidden;
}

input[type=checkbox]:checked + input[type=text] {
    visibility:visible;
}

here is the live demo

如果您愿意，可以使用display:none和display:inline而不是visibility属性。

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

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

3 个答案: