jQuery show/hide div onclick 复选框多个

Question

我的 fiddle 有效，但我需要的是让隐藏的 div 在我单击多个复选框时保持显示。一旦不再单击复选框，我只需要隐藏它。因此，例如，我单击第一个复选框，显示 div。我单击第二个，div 保留。我取消选中第二个，div 保留。我取消选中第一个（这意味着 none 再次选中）并且 div 隐藏。我尝试使用 slideToggle，但一旦不再选中复选框，它就不会隐藏。

https://jsfiddle.net/6zsdLa5p/

HTML:

<input type="checkbox" value="ui-options" /><br />
<input type="checkbox" value="ui-options" /><br />
<input type="checkbox" value="ui-options" /><br />
<input type="checkbox" value="ui-options" />

<br /><br />

<div class="ui-options">
show me!
</div>

CSS:

.ui-options {
display:none
}

JS:

$('input[type="checkbox"]').click(function(){
    if($(this).attr("value")=="ui-options"){
        $(".ui-options").slideToggle(150);
    }
});

Answer 1

使用切换，每次单击复选框时，您都是 hiding/showing div。您需要检查是否有任何 "checked" 复选框并决定是否要显示或隐藏您的 div。例如像这样：

$('input[type="checkbox"]').click(function(){
    if($('input[type="checkbox"]:checked').length > 0)
        $(".ui-options").slideDown(150);
    else
        $(".ui-options").slideUp(150);
});

Answer 2

我建议：

// find the <input> elements whose type is equal to 'checkbox',
// bind a change event-handler to those elements:
$('input[type="checkbox"]').change(function() {

  // selecting the <div> element(s) with a class of
  // 'ui-options', then using a ternary within the square brackets,
  // if there are checked <input> elements, we use the slideDown
  // method (to show) if there are no checked <input> elements
  // we use the slideUp method (to hide):
  $('div.ui-options')[$('input[type=checkbox]:checked').length ? 'slideDown' : 'slideUp']('fast');
});

$('input[type="checkbox"]').change(function() {
  $('div.ui-options')[$('input[type=checkbox]:checked').length ? 'slideDown' : 'slideUp']('fast');
});

.ui-options {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="ui-options" />
<br />
<input type="checkbox" value="ui-options" />
<br />
<input type="checkbox" value="ui-options" />
<br />
<input type="checkbox" value="ui-options" />
<br />
<br />
<div class="ui-options">show me!</div>

外部 JS Fiddle demo 用于实验。

参考文献：

jQuery show/hide div onclick 复选框多个

jQuery show/hide div onclick checkbox multiple

html

jquery

onclick

show

hide