Geek Answers Handbook

The input field will appear after selecting the check box. HTML

I have a Twitter bootstrap form that has 6 vertical flags. I need to have an input form field every time they select the checkbox. This may be in the form of a pop-up window or, perhaps, something that appears to the right of the flag. I suppose this is some kind of javascript function, but I have no idea how to do this. Any suggestions would be appreciated. Each text box, if selected, should have a box that appears, and asks how many years of experience they have in this particular area. This information will be collected through the $ _POST variables. Therefore, each pop-up flag must have its own unique name, so I can publish it.

<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>
+4
3

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

+4

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

+3

JavaScript, . - :checked . .

HTML:

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

CSS

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

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

, display:none display:inline, visibility.

The above example assumes that the text field immediately follows the flag in the markup, but you can use some kind of sibling / child selectors to select it if it is either a sibling or a child (direct or indirect) flag.

+2
source

More articles:


All Articles