Div should show if any of checkbox clicked

user_4192877 0
Viewed 1238

I am doing show hide div, when I click checkbox div appear 'div' is visible till all checkbox are checked if no checkbox is checked div disappear, the problem I am facing is when I click the first checkbox the div appear/disappear but I want show/hide should happen at the click of any checkbox, and the div should appear while checkbox is checked.

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;
}

Jquery

$('#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);
  });

FIDDLE DEMO

jquery
5 Answers

you need to test if the current checkbox is checked or not by testing if $(this).prop('checked') is true and if not check if all checkbox are not checked to hide the div if(!$("#container-grid-list input[type=checkbox]:checked").length):

$('#container-grid-list input[type=checkbox]').on('change', function () {
  if($(this).prop('checked') == true)
      $(".global-download-bar").show();  // checked
  else if(!$("#container-grid-list input[type=checkbox]:checked").length)
      $(".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);
  });

http://jsfiddle.net/7owenvuc/7/

user_67039250

Just change in your js:

if($('#container-grid-list input[type=checkbox]').prop('checked') == true)

to

if($('#container-grid-list input[type=checkbox]').filter(':checked').length >= 1)

See Snipped

$('#container-grid-list input[type=checkbox]').on('change', function () {
  if($('#container-grid-list input[type=checkbox]').filter(':checked').length >= 1)
      $(".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);
  });
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

user_92952520

You can use $('#container-grid-list input[type=checkbox]:checked').length > 0 in your if condition to check the length of the checked checkboxes. Also do not use two change function for the same set of checkboxes.

var $checkboxes = $('#container-grid-list input[type=checkbox]');
$checkboxes.on('change', function() {
  if ($('#container-grid-list input[type=checkbox]:checked').length > 0)
    $(".global-download-bar").show(); // checked
  else
    $(".global-download-bar").hide(); // unchecked
  var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
  $('.global-download-bar .count').text(countCheckedCheckboxes);
})
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

user_70531900

only thing that you need to check if at least :

if ($("#container-grid-list input:checkbox:checked").length > 0){// at least one is checked}
user_105361120

Try this...

$('#container-grid-list input[type=checkbox]').on('change', function () {

  if ($("#container-grid-list input:checkbox:checked").length > 0)
    {
        $(".global-download-bar").show(); // any one is checked 
    }

  else{
   $(".global-download-bar").hide();  // unchecked
  }

  })
user_62512320
Related