jquery checkbox prepend-单独工作，但在函数中放在一起时不工作

我不熟悉javascript和jquery，但非常渴望学习

我的最终目标是制作一个弹出窗口，其中显示一个目录和链接，这在目录中是正常的。此目录称为“打印调整”。在目录中的每个章节标题之前，我想要一个复选框。如果勾选，此复选框将从文档中删除该章节。此外，我需要一个复选框，如果勾选，则勾选所有其他复选框，并删除文档中的所有章节。如果选中了所有章节特定复选框，则会自动选中主复选框。 我已经分别测试了部分代码，但当我将其放入“Print adjust”函数时遇到了挑战。目录是完全可操作的，复选框显示在TOC中每个标题的起始处，但是当我希望插入checkboc类“justone”时，“class”Master（主类）会插入到每一行中-主类在单独的div中只能有一个复选框，这应该是复选框“将它们全部规则化”。 此复选框根本没有插入，但所有其他复选框都得到此类。在div I want此复选框中，仅显示文本输入字段-其中许多字段

如果有人能给我指出正确的方向，我将不胜感激

以下是我正在努力解决的部分功能：

var check= document.createElement ('input');
check.type= "checkbox";
check.id= "CHECK" + sectionNumber;
check.className="justone";

$("input[type='checkbox'].justone").change(function(){
    var a = $("input[type='checkbox'].justone");
    if(a.length == a.filter(":checked").length){
        $('.containerhideall').prop('checked', true);
    }
    else {
        $('.containerhideall').prop('checked', false);
    }
});

$('.justone').change(function(){
    if($('.justone:checked').length==0){
        $('#purpose_scope').show();
    }else{
        $('#purpose_scope').hide();
        $('.justone:checked').each(function(){
            $('#'+$(this).attr('data-ptag')).show();
        }) 
    }});

    var MASTERcheck= document.createElement ('input');
    MASTERcheck.type= "checkbox";
    MASTERcheck.id= "MASTER";
    MASTERcheck.className="containerhideall";
    MASTERcheck.innerHTML=sectionNumber;

    $('.containerhideall').click(function() {
    if ($(this).is(':checked')) {
        $('input:checkbox').prop('checked', true);
    } else {
        $('input:checkbox').prop('checked', false);
    }
});

$('.containerhideall').change(function(){
    if($('.containerhideall:checked').length==0){
        $('.screensteps-section').show();
    }else{
        $('.screensteps-section').hide();
        $('.containerhideall:checked').each(function(){
            $('#'+$(this).attr('data-ptag')).show();
        })
    }
});

$('.checkall').prepend (MASTERcheck);
    $('.PRINTEntry').each(function(n) {
    (this).prepend (check);
});

---

变异变量可能很棘手。我建议尽可能避免这种情况。如果没有看到代码的其余部分，很难准确地说出如何最好地进行这项工作。但我认为这将为您指明正确的方向：

@media print {
  .hideFromPrint {
    display: none;
  }
}

<div class="TOC">
  <div class="chapter">
    <span>chapter 1</span>
  </div>
  <div class="chapter">
    <span>chapter 2</span>
  </div>
  <div class="chapter">
    <span>chapter 3</span>
  </div>
  <div class="footer">
    <input class="checkbox all hide-chapter" type="checkbox"><span>hide all chapters</span>
  </div>
</div>

$('<input class="checkbox single hide-chapter" type="checkbox">')
  .prependTo('.chapter')
  .on('click', function() {
    $(this)
      .closest('.chapter')
      .removeClass('hideFromPrint')
      .addClass(this.checked ? 'hideFromPrint' : '');
    $('.checkbox.all')
      .prop('checked', $('.checkbox.single').length === $('.checkbox.single:checked').length)
  });

$('.checkbox.all').on('click', function() {
    $('.checkbox.single').prop('checked', this.checked)
  });

@媒体打印{
.hideFromPrint{
显示：无；
}
}
第一章
第二章
第三章
隐藏所有章节
$('')
.prependTo（“.chapter”）
.on（'单击'，函数（））{
$（本）
.最近（“.章”）
.removeClass（'hideFromPrint'）
.addClass（此.checked？'hideFromPrint'：''）；
$（'.checkbox.all'）
.prop（'选中'，$（'.checkbox.single'）。长度===$（'.checkbox.single:checked'）。长度）
});
$（'.checkbox.all'）。在（'click'，function（）上{
$（'.checkbox.single'）.prop（'checked'，this.checked）
});

需要注意的一些事项： 单个复选框在动态添加后被绑定。jQuery不像css那样工作，也就是说，css应用于任何具有正确类的对象，而不管何时添加，jQuery只能使用DOM中当前的对象。如果元素已绑定，则使用已绑定有事件侦听器的类并不重要当你添加绑定时，我不存在。我知道这让我一开始很困惑

我没有删除你不想要的章节，而是使用了一个漂亮的css属性来隐藏它，不让它被打印出来。理论上，减少DOM操作更好

---

我使用单击而不是更改来防止复选框相互更改的问题。

附加注释：上面的代码只隐藏具有特定ID的元素，我希望动态创建文档中这些章节的ID，并动态“连接”复选框“请参阅这些章节。这意味着，如果我打开一个新文档，复选框将自动在TOC中显示在前面的章节上起作用，您正在创建一个

MASTERcheck

元素，但请查看您将

属性

分配给

check

元素的情况，您已经在开始第二件事时创建了该元素，您正在使用

var-check

和

var-MASTERcheck

创建复选框，但是您的分配/附加到html的位置…？您的代码看起来不完整。您好，感谢您的回复。var（check和MASTERcheck）在代码的底部有前缀。