How to create fields dynamically when selecting a value in the checkbox?

Question

In this script below it counts checkbox marked.

How can I make it besides count, also add new fields <input type="text"> according to the quantity of checkbox marked

For example: I marked 5 box, then show 5 fields

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type='text/javascript'>//<![CDATA[
   window.onload=function(){
     var contador = function() {
        var n = $( "input:enabled:checked" ).length;

        $("#checkcount").text( n + (n === 1 ? " é" : " são") + " selecionadoss" );
     };
     contador(); 
     $( "input[type=checkbox]" ).on( "click", contador );
   }//]]> 
</script>

<input type="checkbox" name="check1" checked disabled  value="1">
<input type="checkbox" name="check1" value="2">
<input type="checkbox" name="check1" value="3">
<input type="checkbox" name="check1" value="4">
<input type="checkbox" name="check1" value="5">    
<div id="checkcount"></div>

Answer 1

Well, this can be done in some ways, it will depend on what exactly you want with these text boxes.

I wrote an example that takes into account the order of the elements, that is, if you have marked 5 checkboxes, will have 5 text boxes, if you uncheck the last box, the last text box will disappear, if you uncheck the second, the second will disappear... See if it fits.

Javascript

var contador = function() {
var n = $("input:enabled:checked").length;
var unchecked = 0;
var cb = $(this).index();
$("input:enabled").each(function(i) {
    if ((i < cb) && !($(this).is(":checked"))) {
      ++unchecked;
    }
  })

  if($(this).is(":checked")){
    $('body').append('<input type="text" class="created">');
  }else{
    $('.created').eq($(this).index()-unchecked).remove();
  }

$("#checkcount").text(n + (n === 1 ? " é" : " são") + " selecionadoss");
};
contador();
$("input[type=checkbox]").on("click", contador);

To input text dynamically created I gave the class="created" for easier handling.

The variable unchecked will receive the amount of unmarked checkboxes positioned before it was clicked, this value will be subtracted as the index of the clicked checkbox, this will result in the position of the element that will be deleted when unchecking the checkbox. I know it is confusing, but it is easy to adapt.

For some reason the same code that was in Jsfiddle and works perfectly, does not work here, so I left only Jsfiddle.

Example - Jsfiddle

Inputs created within a specific div

For this just replace the

$('body').append(...

For

$('sua div').append(...

Using the selector of id or class or what you prefer. Follow an example in Jsfiddle

Jsfiddle

I hope it helped...