Checkbox multiselect user interface

I wrote a small multiple select interface in jQuery, and I'm looking for any feedback on code quality/usability.

It has to do the following:

• When check all is checked, all boxes must become checked

• When check all is unchecked, all boxes must become unchecked

• When all boxes become checked the check all box must become checked

• Then if one box is unchecked, the check all box must become unchecked

• When any box is checked or unchecked a count must be updated, and the item tr must toggle a selected class.

• If any checkbox is checked the tools button must appear

• If no checkbox is checked the filters button must appear

```
var showToolbar = function() {
$('[data-role="toolbar"]').show();
$('[data-role="filters"]').hide();
};

var showFilters = function() {
$('[data-role="toolbar"]').hide();
$('[data-role="filters"]').show();
};

$(document).on('ready page:load', function() {
$('[data-select="items"]').on('click', function() {
var checkAllBox = $(this),
checkOneBoxes = $('[data-select="item"]');

if ( checkAllBox.is(':checked') ) {
checkOneBoxes.prop('checked', true).trigger('change');
showToolbar();
} else {
checkOneBoxes.prop('checked', false).trigger('change');
showFilters();
}
});

$('[data-select="item"]').on('change', function() {
var checkbox = $(this),
tableRow = checkbox.parents('tr');

if ( checkbox.is(':checked') ) {
tableRow.addClass('selected');
} else {
tableRow.removeClass('selected');
}

var numberOfCheckedBoxes = $('[data-select="item"]:checked').length;

if ( numberOfCheckedBoxes > 0 ) {
showToolbar();
} else {
showFilters();
}

var numberOfUncheckedBoxes = $('[data-select="item"]').not(':checked').length;

if ( numberOfUncheckedBoxes === 0 ) {
$('[data-select="items"]').prop('checked', true);
} else {
$('[data-select="items"]').prop('checked', false);
}

var target = $('.

You can simplify this:

if ( numberOfUncheckedBoxes === 0 ) {
  $('[data-select="items"]').prop('checked', true);
} else {
  $('[data-select="items"]').prop('checked', false);
}

Like this:

$('[data-select="items"]').prop('checked', numberOfUncheckedBoxes === 0);

Similarly, if you add this helper function:

var showOrHideToolbar = function(show) {
  if (show) {
    showToolbar();
  } else {
    showFilters();
  }
}

Then you could simplify this:

if ( checkAllBox.is(':checked') ) {
  checkOneBoxes.prop('checked', true).trigger('change');
  showToolbar();
} else {
  checkOneBoxes.prop('checked', false).trigger('change');
  showFilters();
}

Like this:

var checkAllChecked = checkAllBox.is(':checked');
checkOneBoxes.prop('checked', checkAllChecked).trigger('change');
showOrHideToolbar(checkAllChecked);

And this one:

if ( numberOfCheckedBoxes > 0 ) {
    showToolbar();
} else {
    showFilters();
}

Like this:

showOrHideToolbar(numberOfCheckedBoxes > 0);

StackExchange Code Review Q#65212, answer score: 2