Question

有8个checkBox，我的表单中有另一个div用于MySQL查询。我希望，如果选中任何复选框，div将为fadeIn，如果未选中，我的div将为fadeOut; 我不知道正确的格式。请帮帮我。

复选框

 <input type="checkbox" name="data[]" value="1">Mathematics
<input type="checkbox" name="data[]" value="2">Physics
<input type="checkbox" name="data[]" value="3">Chemistry
<input type="checkbox" name="data[]" value="4">Biology
<input type="checkbox" name="data[]" value="5">English
<input type="checkbox" name="data[]" value="6">History

另一个div

<div class="my_div"> This Div will fadeIn and fadeOut if Minimum one dive is checked </div>

请给我回答HTML和jQuery代码。

Answer 1

此代码有效：

<input type="checkbox" name="data[]" value="1">Mathematics
<input type="checkbox" name="data[]" value="2">Physics
<input type="checkbox" name="data[]" value="3">Chemistry
<input type="checkbox" name="data[]" value="4">Biology
<input type="checkbox" name="data[]" value="5">English
<input type="checkbox" name="data[]" value="6">History
Another div

<div class="my_div" style="display: none;"> This Div will fadeIn and fadeOut if Minimum one dive is checked </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('input').change(function(){
            var count = 0;
            var inputs = $('input');
            inputs.each(function(){
                if (this.checked ) {
                    count++;
                }
            });
            if(count == 0){
                $('div').fadeOut();
            }
            if(count == 1){
                $('div').fadeIn();
            }
        });
    });
</script>

Answer 2

如果div文件夹位于HTML标记中的复选框

之后，您可以使用css执行此操作

EXAMPLE

CSS：

input[type=checkbox]:checked ~ div {
  opacity: 1;
}

div {
  transition:all 0.3s;
  opacity: 0;
}

Html标记需要看起来像这样

<input type="checkbox" name="data[]" value="6">History

<div>Test</div>

否则使用css我们无法选择它。

如果选中任何复选框，则另一个div将为fadeIn（）;

2 个答案: