时间戳

首页 > 解决方案 > Div 应显示是否单击了任何复选框

jquery - Div 应显示是否单击了任何复选框

问题描述

我正在显示隐藏 div，当我单击复选框 div 出现“div”可见，直到所有复选框都被选中如果没有选中复选框 div 消失，我面临的问题是当我单击第一个复选框时，div 出现/消失但我想要显示/隐藏应该在单击任何复选框时发生，并且在选中复选框时应该出现 div。

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

小提琴演示

标签： jquery

解决方案

您需要通过测试是否$(this).prop('checked')为真来测试当前复选框是否被选中，如果不是，则检查是否未选中所有复选框以隐藏 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/

推荐阅读