Question

我是javascript和jquery的新手，但非常渴望学习。

我的最终目标是制作一个弹出窗口，其中显示了一个目录，其中包含链接，这在内容列表中是正常的。此目录称为＆＃34;打印调整＆＃34;。就在目录中每章的标题之前，我想要一个复选框。如果勾选，此复选框将从文档中删除该章节。另外，我想要一个复选框，如果勾选，勾选所有其他复选框，并删除文档中的所有章节。如果选中所有章节特定复选框，将自动选中主复选框。我已经分别测试了部分代码，但是当我把它放入＆＃34;打印调整＆＃34;功能。目录是完全可操作的，复选框显示在TOC内的每个标题中，但是当我期望checkboc类＆＃34; justone＆＃34;要插入，＆＃34;班级＆＃34;大师＆＃34;插入每一行 - 主人应该只是一个单独的div内的一个复选框，而这应该是复选框＆＃34;来统治他们所有＆＃34;。根本没有插入此复选框，但所有其他复选框都会获得此类。在div我想要这个复选框，只显示文本输入字段 - 其中很多。

如果有人能指出我正确的方向，那将非常感激。

这是我正在努力的功能的一部分：

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

Answer 1

变异变量可能很棘手。我建议尽可能避免这种情况。如果没有看到其他代码，很难确切地说出你最好如何做到这一点。但我认为这会指出你正确的方向：

@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)
  });

https://jsfiddle.net/v1y92Lak/64/

需要注意的一些事项：

单个复选框在动态添加后绑定。 jQuery并不像css那样工作，也就是说，无论何时将css应用于具有正确类的任何东西，jQuery只能与DOM中当前的内容一起使用。如果在添加绑定时元素不存在则使用已绑定了事件侦听器的类并不重要。我知道这首先引起了我的兴趣。

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

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

jquery复选框prepend - 单独工作，但不能在函数

1 个答案:

需要注意的一些事项：