(php/jquery) hide and show checkboxes according to another checked checkbox value

Question

i have a table in my database like this:

------------------------------
| ID_1         | ID_2        |
------------------------------
| A            | 1           |
| A            | 2           |
| A            | 3           |
| B            | 1           |
| B            | 2           |
| B            | 5           |
| C            | 1           |
| C            | 4           |
| C            | 3           |
------------------------------

and i have some checkboxes for ID_1 like this

<input class="ID_1" type="checkbox" value="A">
<input class="ID_1" type="checkbox" value="B">
<input class="ID_1" type="checkbox" value="C">

i'm trying to do that each time i checked the ID_1 checkbox, the ID_2 checkbox will show, depends on ID_1 checkbox i checked according to the table above. so if i checked two checkboxes

<input class="ID_1" type="checkbox" value="A" checked>
<input class="ID_1" type="checkbox" value="B" checked>
<input class="ID_1" type="checkbox" value="C">

it'll show like this:

<input class="ID_2" type="checkbox" value="1">
<input class="ID_2" type="checkbox" value="2">
<input class="ID_2" type="checkbox" value="3">
<input class="ID_2" type="checkbox" value="5">

is that possible using jquery? i need your help please

same id on each element ??? Its bad bad bad , instead use class.... — Praveen Kumar
– Praveen Kumar, Commented Apr 2, 2016 at 5:57
it should be like this? <input class="ID_2" type="checkbox" name="checkbox" value="1"> — Billy
– Billy, Commented Apr 2, 2016 at 6:00
After using classes instead of ids. Create an event on all check boxes. Make an ajax call to a PHP page after each check box state change sending all the check box states to the PHP page. The PHP page will query the database and return the distinct values where you display it on the page using jquery. — Ahmad Essam
– Ahmad Essam, Commented Apr 2, 2016 at 6:18
@Billy pasted a solution, should work for you, if it helped then kindly up vote. — shivgre
– shivgre, Commented Apr 2, 2016 at 7:27

shivgre · Accepted Answer · 2016-04-02 07:26:04Z

1

This is possible using jquery, you need to display all the checkboxes and use class instead of Id. I am working on a solution will post once done.

Here is working solution for you. You can just add this in a script and run in browser.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html >
<html>
    <head>
        <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script>  
        
        <script type="text/javascript">
            $('document').ready(function () {
                //OBJECT OF ARRAY WITH YOUR DESIRED VALUES FROM DATABASE, THIS COULD BE MADE DYNAMICALLY
                var id1Obj = { A:['1','2','3'], B:['1','2','5'], C:['1','3','4'] }; 

                $('.ID_1').click(function () {
                    
                    $('.ID_2').hide();
                    jQuery('.ID_1:checked').each(function( index ) {
                           
                        var valId1CheckboxVal = $(this).val();                        
                        
                        jQuery('.ID_2').each(function( index ) {  
                            
                            
                            if( $.inArray( $( this ).val(), id1Obj[valId1CheckboxVal] ) != -1 )
                            { 
                                $(this).show();
                            }
                            else
                            {
//                                console.info("flse for " + $( this ).val());
//                                console.log( $(this) );
                            }
                        });
                    });
                    
                });
                
                
                

            });
        </script>
    </head>
    <body>

        <div style="width:100%">
            <label>ID_1 checkboxes</label><br>
            <input class="ID_1" type="checkbox" value="A"> A<br>
            <input class="ID_1" type="checkbox" value="B"> B<br>
            <input class="ID_1" type="checkbox" value="C"> C<br>
            
            <br>
            
            
        </div>
        <br>
        <div style="width:100%">
            <label>ID_2 checkboxes</label><br>
            
            <input class="ID_2" type="checkbox" value="1">1 <br>
            <input class="ID_2" type="checkbox" value="2">2 <br>
            <input class="ID_2" type="checkbox" value="3">3 <br>
            <input class="ID_2" type="checkbox" value="4">4 <br>
            <input class="ID_2" type="checkbox" value="5">5 <br>
        </div>
        
    </body>
</html>

edited Apr 2, 2016 at 7:26

answered Apr 2, 2016 at 6:41

shivgre

1,1732 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Billy Over a year ago

it's my bad using Id than class :) thank you, i appreciate it

shivgre Over a year ago

@Billy you can click the "Run code snippet below my answer and try clicking on checkboxes. Up Vote if it works.

shivgre Over a year ago

Thanks @Billy, glad it helped, could you up vote as well

Collectives™ on Stack Overflow

(php/jquery) hide and show checkboxes according to another checked checkbox value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related