How to add a deselect all button to list of checked inputs that works with script to change class

user_9686594 0
Viewed 28

I made a list of inputs with a button at the bottom that allows you to deselect all elements. Using jquery the inputs modify the class of content on the page. This function works, but i want the deselect all button to be able to deselect all checkboxes AND actually modify the classes. Here is the 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" />

Here is the 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');
    })
})
html jquery javascript
1 Answers

If I understand what your saying the problem is; it's that the checkbox's work when you manually select and unselect them as far as the class list being modified but when you use your select/deselect all the checkboxes are checked/unchecked but the class list isn't modified.

This is because your just modifying the attribute of your checkbox inputs on if they should be selected or not, your not triggering your change event on each input that does the class list modifications.

You should be able to simply solve your issue by appending .trigger('change') to the end of your .attr(...) and .removeAttr(...) calls to trigger your existing change event that will then detect if the input is checked or not and do the appropriate class list modifications:

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');
    })
})
user_10464020
Related