Question

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

我尝试了下面的代码，但它只显示了一个文本字段，并且我在视图源中检查了未定义的类型。我认为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元素。

＆＃13;

$(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();
            }
        });
     });

＆＃13;

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

＆＃13;

Answer 2

您的代码中似乎没有包含“students_items”类的HTML元素，因此JavaScript的这部分将不会被执行： $(".students_items").append('<div class=....)

使用此类CSS类创建元素，然后重试。

输入文本类型在视图源中显示未定义

2 个答案: