Make div appears if any of the checkbox is checked!

Question

Hello,

I am working on dynamic site where multiple checkboxes are there with unique ID,

What I want is new <div> to appear if any of the checkbox is checked & disappears if all the checkboxes are unchecked.

New to javascripts, need your help.

Thanks

Answer 1

recommended to learn Jquery

http://jquery.org/

you can put an ascending id like chekboxid1 , checkboxid2 ....

and check if all be checked :

$('[id^=checkboxid]').live('click', function(){
var total = {insert the sum of checkbox}
    if($("[id^=checkboxid]:checked").length == total){
    // do something
}
});

to know if all unchecked compare the length 0 , instead of total.

another link more detailed :

http://charlie.griefer.com/blog/index.cfm/2009/8/14/jQuery--Accessing-Checked-Checkboxes

Answer 2

<style>
 #appear_div {
 display: none;
</style>

<script type="text/javascript">
 function doInputs(obj){
 var checkboxs = $("input[type=checkbox]:checked"); 
 var i =0, box;
 $('#appear_div').fadeOut('fast');
     while(box = checkboxs[i++]){
     if(!box.checked)continue;
     $('#appear_div').fadeIn('fast');
     break;
     }
 }
 </script>

 <form>
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 </form>
 <div id="appear_div" style="">
 <input type="text">
 </div>

This worked for me.

Thanks