Как добавить кнопку отмены выбора в список проверенных входов, который работает со скриптом для изменения класса

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

Если я понимаю, что вы говорите, проблема; дело в том, что флажок работает, когда вы вручную выбираете и отменяете их выбор, если список классов изменяется, но когда вы используете свой выбор / отмените выбор, все флажки отмечены / не отмечены, но список классов не изменен.

Это потому, что вы просто изменяете атрибут своих входов-флажков, если они должны быть выбраны или нет, вы не trigger отмечаете ваше 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');
    })
})