Question

我的小提琴有效，但我需要的是如果我点击多个复选框，隐藏的div显示为STAY。而且我只需要HIDE一旦点击NO复选框就可以了。例如，我单击第一个复选框，div显示。我点击第二个，div停留。我取消选中第二个，div停留。我取消选中第一个（这意味着没有再次检查）并且div隐藏。我尝试使用slideToggle，但一旦没有选中复选框，它就不会隐藏。

ui.boostrap

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

我建议：

// 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用于实验。

参考文献：

slideDown()。
slideUp()。

Answer 2

使用切换，每次单击复选框时都隐藏/显示div。您需要检查是否有“已选中”复选框，并决定是否要显示或隐藏您的div。例如：

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

jQuery显示/隐藏div onclick复选框多个

2 个答案: