Input text type showing undefined in view source

Question

I have three check box with two is auto selected. I have to display the text field with a label which check box is selected.

I tried below code but it is displaying only one text field and type is undefined I checked in view source. I think there is some issue with this . Would you help me out?

 $(document).ready( function(){ $checkbox=$(".add_student_input").is(":checked"); if($checkbox == true) { $(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>'); } else { //check false $('.students_items').find('.' + this.id).remove(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <input type="checkbox" name="a" id="class_1" class="add_student_input" data-type="text" checked><label for="class_1">number1</label> <input type="checkbox" name="b" id="class_2" class="add_student_input" data-type="text" checked><label class="class_2">number2</label> <input type="checkbox" name="c" id="class_3" class="add_student_input" data-type="text"><label class="class_3">number3</label> <span class="students_items"></span> 

Answer 1

You are missing the loop for $(".add_student_input") which gives you three checkboxes. So, you need to use each() that will loop over all three checkbox and check for the checked checkbox and then create a respective text element for it.

 $(document).ready( function(){ $checkbox=$(".add_student_input"); $checkbox.each(function(){ var isChecked = $(this).is(":checked"); if(isChecked) { $(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>'); } else { //check false $('.students_items').find('.' + this.id).remove(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="a" id="class_1" class="add_student_input" data-type="text" checked><label for="class_1">number1</label> <input type="checkbox" name="b" id="class_2" class="add_student_input" data-type="text" checked><label class="class_2">number2</label> <input type="checkbox" name="c" id="class_3" class="add_student_input" data-type="text"><label class="class_3">number3</label> <div class='students_items'></div> 

Answer 2

It appears that you do not have HTML element with class "students_items" in your code, so this portion of the JavaScript will not be executed: $(".students_items").append('<div class=....)

Create element with such CSS class and try again.