输入字段在预览页面中重复

Question

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

但是在点击预览之后，我得到了两次输入字段。我的意思是我得到了两个文本字段中的四个。

我的 ready script 有问题。你能帮我解决这个问题吗？

<!--If any check box clicked then active this script-->

$(function() {
  $(".add_student_input").change(function() {
    if (this.checked) {
      $(".students_items").append('<div class="form-group row ' + this.id + '"><label class="col-sm-4 col-form-label">' + $(this).next('label').text() + '</label><div class="col-sm-8"><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div></div>');
    } else {
      $('.students_items').find('.' + this.id).remove();
    }
  });
  });

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

    /*form preview*/
function PrintPreview() {
        var toPrint = document.getElementById('open_in_preview');
        var popupWin = window.open('', '_blank');
        popupWin.document.open();
 popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
        popupWin.document.write(toPrint.innerHTML);
        popupWin.document.write('</body></html>');
        popupWin.document.close();
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body id="open_in_preview">
<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>

<a href="#" class="btn btn-primary" onclick="PrintPreview();">Preview form</a>
<span class="students_items"></span>
</body>

我得到这样的输出。

Answer 1

作为评论，为什么放在页面下方的脚本会导致多次输入，因为在加载时，它会运行文档准备好并根据复选框再次追加，因此解决问题，将 empty() 放在上面 "reset" 输入之前附加一个新的 1

$(document).ready( function(){ 
        $checkbox=$(".add_student_input"); 
        $(".students_items").empty(); //add this to clear it
        $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(); 
            } 
    }); 
});

用 OP 的另一个问题更新请看plnkr https://plnkr.co/edit/wnGWwcgAySrjfNQwqX3J?p=preview

这里的问题与 empty() 无关，它是它在 DOM 就绪时的表现（但我将其删除，因为你的问题现在不同了），我已经增强了你的脚本，以便它只需要需要的标签，并且结合脚本使它更清晰，请看一下，所以为了真正阅读html中的检查行为，我们需要添加

this.setAttribute("checked", "checked");

这将强制 checked 在 html 中呈现，并且 $(function(){}) 等同于 $(document).ready(function(){})

输入字段在预览页面中重复

Input fields are repeating in preview page

html

javascript

jquery

print-preview