Home/ Questions/Q 8739655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T10:58:42+00:00

I was working on creating checkbox inside checkbox which all should appear inside a

  • 0

I was working on creating checkbox inside checkbox which all should appear inside a dropdownlist box. I was succeeded in creating a couple of checkboxes inside a dropdownlist box. follow the link http://vignesh.gvignesh.org/metroplots/drp/drpcheck.php

Now i am trying to create a checkbox which should appear once user clicks one checkbox. For instance if user checks documents then a couple of checkbox should appear below that checkbox. 

Eg.  []Documents  (if user checks main,  the sub checkboxes should appear)
           []Doc 1 
           []Doc 2
           []Doc 3
     []Phots (if user checks) 
           []photo 1
           []photo 2
           []photo 3

How to attain this through javascript or jquery.

Thanks in Advance. !!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are different ways to do this. This is what I have done:

    <html>

    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                $('.team').on('click',function(){
                    if($(this).is(':checked')){
                        $(this).next().next().show();
                    }else{
                        $(this).next().next().hide();
                    }
                });
            });


        </script>

    </head>

    <body>

        <form name="FootballClubs">

            <input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
            <div style="padding:10px 10px 10px 15px;display:none;">     
                <input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
                <input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
                <input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
            </div>  
            <input type="checkbox" class="team" value="ManCity"/>Man City<br /> 
            <div style="padding:10px 10px 10px 15px;display:none;">
                <input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
                <input type="checkbox" class="player" value="SM"/>Super Mario<br />
            </div>
        </form>

    </body>

</html>

    This is fully working example. Also, you can unchecked the checked elements, when they are hidden again.

    • 0