Make a div if any checkbox is checked!

I am working on a dynamic site where several checkboxes exist with a unique identifier ,

I want a new <div>up to appear if the checkbox is checked. and disappears if all the boxes are unchecked .

New to javascripts, you need your help.

thank

+3
source share
3 answers
<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">
 <input type="text">
 </div>

It worked for me.

thank

+1
source

Recommended to learn jQuery

http://jquery.org/

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

and check if everything is checked:

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

, 0, total.

:

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

+1

I recently had to do something similar using jQuery.

First, hide the download area so that the user cannot see it.

 <style>
     #div2appear{
         display: none;
     }
 </style>

Then the elements of the form

 <form id="AllTheseFields">
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <div id="div2appear">
     <input type="text" />
   </div>
 </form>

And jQuery

 <script type="text/javascript">
    $('#AllTheseFields>input[type=checkbox]').change(
       function(){
           if($('#AllTheseFields>input[type=checkbox]').is(':checked')){
                  // if any of the checkboxes are checked then make the area visible
                  $('#div2appear').show(); 
           }else{
                  // only if all are unchecked will this fire and hide the area
                  $('#div2appear').hide();
           }
       }
    );
 </script>
+1
source

Source: https://habr.com/ru/post/1750880/


All Articles