Create and Delete input type text if the selected input type checkbox

Cristian Meza Published at Dev

Cristian Meza

I have a problem, I need to create or delete as appropriate, a Input type text if a Input type checkbox is selected.

At the moment I can only create the input text, but I manage to find the solution to clear if the checkbox is unchecked.

My HTML code:

<form role="form" action="" method="POST">
  <input type="checkbox" class="myCheckBox" name="category[]" value="1">
  <input type="checkbox" class="myCheckBox" name="category[]" value="2">
  <input type="checkbox" class="myCheckBox" name="category[]" value="3">
  <input type="checkbox" class="myCheckBox" name="category[]" value="4">
  <input type="checkbox" class="myCheckBox" name="category[]" value="5">
  <div class="inputCreate"></div>
  <input type="submit" name="" value="Send yours categories">
</form>

And the jQuery code is as follows

     var wrapper = $(".inputCreate");

$('.myCheckBox').click(function() {
    if ($(this).is(':checked')) {
         $(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
    }
});

As I can do that by unchecking the checkbox, also delete the input text field ?.

Solution to this problem:

var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
    if($(this).is(':checked')){
         $(wrapper).append('<input type="text" name="mytext[]" placeholder="">');
    }
    else{
        $('.inputCreate :last-child').remove();
    }
});

Greeting From Chile.

Prashant Ghimire

This should be exactly what you want: Working Fiddle

var wrapper = $(".inputCreate");
$(".myCheckBox").change( function(){
    if($(this).is(':checked')){
         $(wrapper).append('<input type="text" name="mytext[]" placeholder="'+$(this).val()+'">');
    }
    else{
        $('.inputCreate :last-child').remove();
    }
});

Collected from the Internet

Please contact [email protected] to delete if infringement.