javascript - 输入文本类型在查看源代码中显示未定义

Question

我有三个复选框，其中两个是自动选中的。我必须显示带有选中复选框的标签的文本字段。

我尝试了下面的代码，但它只显示一个文本字段，并且类型未定义，我在查看源代码中 checkin 了。我认为this有一些问题。你能帮我一下吗？

$(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

您缺少 $(".add_student_input") 循环，它为您提供了三个复选框。因此，您需要使用 each() 来循环遍历所有三个复选框并检查 checked 复选框，然后创建相应的 text 元素为了它。

$(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>