javascript - 如何将取消全选按钮添加到与脚本一起更改类别的已检查输入列表

Question

我制作了一个输入列表，底部有一个按钮，允许您取消选择所有元素。使用 jquery 输入修改页面上的内容类别。此功能有效，但我希望取消选择所有按钮能够取消选择所有复选框并实际修改类。这是 HTML:

<label class="container">Articles
  <input type="checkbox" checked="checked" id="articles" name="articles">
  <span class="checkmark"></span>
</label>

<label class="container">Whitepapers
  <input type="checkbox" id="whitepapers" name="whitepapers" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">News
  <input type="checkbox" id="news" name="news" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Webcasts
  <input type="checkbox" id="webcasts" name="webcasts" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Videos
  <input type="checkbox" id="videos" name="videos" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Case Studies
  <input type="checkbox" id="case-studies" name="case studies" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Blogs
  <input type="checkbox" id="blogs" name="blogs" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Data Sheets
  <input type="checkbox" id="data-sheets" name="data sheets" checked="checked">
  <span class="checkmark"></span>
</label>

<input type="button" class="check" value="check all" />

这是 jquery:

jQuery('#articles').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-articles').addClass("hide-item").removeClass("force-show-articles");
    } else {
        jQuery('.resource-grid .category-articles').removeClass("hide-item").addClass("force-show-articles");
    }
});

jQuery('#whitepapers').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-whitepapers').addClass("hide-item").removeClass("force-show-whitepapers");
    } else {
        jQuery('.resource-grid .category-whitepapers').removeClass("hide-item").addClass("force-show-whitepapers");
    }
});

jQuery('#news').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-news').addClass("hide-item").removeClass("force-show-news");
    } else {
        jQuery('.resource-grid .category-news').removeClass("hide-item").addClass("force-show-news");
    }
});

jQuery('#webcasts').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-webcasts').addClass("hide-item").removeClass("force-show-webcasts");
    } else {
        jQuery('.resource-grid .category-webcasts').removeClass("hide-item").addClass("force-show-webcasts");
    }
});

jQuery('#videos').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-videos').addClass("hide-item").removeClass("force-show-videos");
    } else {
        jQuery('.resource-grid .category-videos').removeClass("hide-item").addClass("force-show-videos");
    }
});

jQuery('#case-studies').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-case-studies').addClass("hide-item").removeClass("force-show-case-studies");
    } else {
        jQuery('.resource-grid .category-case-studies').removeClass("hide-item").addClass("force-show-case-studies");
    }
});

jQuery('#blogs').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-blogs').addClass("hide-item").removeClass("force-show-blogs");
    } else {
        jQuery('.resource-grid .category-blogs').removeClass("hide-item").addClass("force-show-blogs");
    }
});

jQuery('#data-sheets').change(function() {
    if(jQuery(this).prop("checked") == false) {
        jQuery('.resource-grid .category-data-sheets').addClass("hide-item").removeClass("force-show-data-sheets");
    } else {
        jQuery('.resource-grid .category-data-sheets').removeClass("hide-item").addClass("force-show-data-sheets");
    }
});

// deselect all

jQuery(document).ready(function(){
    jQuery('.content-type-selection .check:button').toggle(function(){
        jQuery('.content-type-selection input:checkbox').attr('checked','checked');
        jQuery(this).val('uncheck all')
    },function(){
        jQuery('.content-type-selection input:checkbox').removeAttr('checked');
        jQuery(this).val('check all');
    })
})

Answer 1

如果我明白你说的问题是什么；当您手动选择和取消选择它们时，复选框会起作用，直到修改类列表为止，但是当您使用选择/取消选择时，所有复选框都会被选中/取消选中，但类列表不会被修改。

这是因为您只是修改复选框输入的属性(是否应选择它们)，而不会在每个输入上触发您的change事件类列表修改。

您应该能够通过将 .trigger('change') 附加到 .attr(...) 和 的末尾来简单地解决您的问题>.removeAttr(...) 调用来触发现有的 change 事件，然后该事件将检测输入是否已检查并执行适当的类列表修改:

jQuery(document).ready(function(){
    jQuery('.content-type-selection .check:button').toggle(function(){
        jQuery('.content-type-selection input:checkbox').attr('checked','checked').trigger('change');
        jQuery(this).val('uncheck all')
    },function(){
        jQuery('.content-type-selection input:checkbox').removeAttr('checked').trigger('change');
        jQuery(this).val('check all');
    })
})