JSFiddle - React, Tailwind, and code Playground

by Adam Pavlov

HTML

<div id="container-grid-list">
<input type="checkbox" name="thing" value="valuable" id="thing1"> Point 1
<br>
<input type="checkbox" name="thing" value="valuable" id="thing2"> Point 1
<br>
<input type="checkbox" name="thing" value="valuable" id="thing3"> Point 1
<br>
<input type="checkbox" name="thing" value="valuable" id="thing4"> Point 1
<br>
<input type="checkbox" name="thing" value="valuable" id="thing5"> Point 1
<br>
</div>




<div class="global-download-bar">
  <ul class="download-bar clearfix">
    <li class="remove-asset-confirmation clearfix">
      <a href="javascript:;" class="btn btn-remove">REMOVE</a>
      <a href="javascript:;" class="btn btn-cancel">CANCEL</a>
    </li>
    <li class="asset-count-cont">
      <div class="asset-count clearfix">
        <span class="count">1</span>
        <label class="asset-selected">ASSETS SELECTED <a href="javascript:;" class="close-asset">Close</a></label>
      </div>
    </li>
    <li>
      <button type="button" class="download-asset">DOWNLOAD</button>
      <div class="downloading-asset">
        DOWNLOADING...
      </div>
    </li>
  </ul>
</div>

CSS

.global-download-bar {
    background: #000000;
    margin: 0 auto;
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 30px;
    padding: 23px 25px 22px 25px;
    width: 1200px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: none;
}

JavaScript

$('#container-grid-list input[type=checkbox]').on('change', function () {
  if($('#container-grid-list input[type=checkbox]').prop('checked') == true)
      $(".global-download-bar").show();  // checked
  else
      $(".global-download-bar").hide();  // unchecked
  })

  var $checkboxes = $('#container-grid-list input[type=checkbox]');
  $checkboxes.change(function(){
      var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
      $('.global-download-bar .count').text(countCheckedCheckboxes);
  });