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

作为评论，为什么放在页面下方的脚本会导致多次输入，因为在onload时，它会运行文档并根据复选框再次追加，因此要解决问题，请empty()在它上面“重置”输入，然后用新的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(){})

相同

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

1 个答案: