If any check box checked, another div will be fadeIn(); [closed]

232
November 23, 2016, at 1:35 PM

There are 8 checkBox and have another div in my form for MySQL query. I want, if any checkbox checked, that div will fadeIn and if unchecked, my div will fadeOut; I don't know the right format. Please help me about this.

CheckBox

 <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"> This Div will fadeIn and fadeOut if Minimum one dive is checked </div>

Please give me answer with HTML and jQuery code.

Answer 1

This code works :

<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

You can do this with css if the div folder is is after the checkboxes in the HTML markup

EXAMPLE

CSS:

input[type=checkbox]:checked ~ div {
  opacity: 1;
}
div {
  transition:all 0.3s;
  opacity: 0;
}

Html markup needs to look like this

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

Otherwise with css we cant select it.

READ ALSO
Toggle text color of all div elements

Toggle text color of all div elements

Is there a way to change all the text color to black when the checkobx is checked and back to their original color when unchecked?.

347
Primefaces datatable scrollable width auto

Primefaces datatable scrollable width auto

I have a Primefaces datatable:.

823
Get class from options in slect2.js tags

Get class from options in slect2.js tags

I am using select2. js library with following code, I would like to have all classes from options tag to the select2 list, something like <li class="active select2-selection__choice" title="AA"><span.

376
Uncaught TypeError: Cannot set property &#39;src&#39; of null when want to switch the image

Uncaught TypeError: Cannot set property 'src' of null when want to switch the image

I am keep getting the Uncaught TypeError: Cannot set property 'src' of null error when i want to switch the image. .

334