Div应该显示是否选中了任何复选框

时间：2018-10-26 09:17:32

标签： jquery

我正在执行show hide 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);
  });

FIDDLE DEMO

5 个答案:

答案 0 :(得分：1)

您需要通过测试$(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/

答案 1 :(得分：0)

只需更改您的js：

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

到

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

请参阅已剪裁

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

答案 2 :(得分：0)

您可以在$('#container-grid-list input[type=checkbox]:checked').length > 0条件下使用if来检查checked复选框的长度。另外，请勿将两个change函数用于同一组复选框。

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>

答案 3 :(得分：0)

您至少需要检查的事情：

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

答案 4 :(得分：0)

尝试一下... 

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

  })
相关问题
最新问题