Home/ Questions/Q 6955067
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:41:19+00:00

I am in need of making a jquery based interface where on change of

  • 0

I am in need of making a jquery based interface where on change of select causes appropriate checkeboxes to be marked. For eg I am listing Group in a drop down each group have its members. For eg group A have 5 members. Every Member is listed when A user select groupA all checkbox(5 users) checkbox will get auto selected
Here is what I have now

<?php
$groups[]= array(12 => array ( 1,2,3,4,5),13=>array ( 32,25,26),14=>array(22,23));
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function selecttheuser()
    {
      $(document).ready(function() {
        var gidet=$("select#group_id").val();
        alert(gidet);
        });
    }
</script>

<select style="width:466px" name="group_id" id="group_id" onchange="selecttheuser()">
<option value="0">Not a Group Event</option>
<option value="12">Gname</option>
<option value="13">Groupname2</option>
</select>

<input type="checkbox" value="19" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="20" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="21" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="22" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="23" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="32" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="25" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="26" class="frnzchk" name="frnzchk[]"><br>

I have 2 problems

  1. how can I manage the PHP array it can have like 100 groups so how do I make this feasible in javascript
  2. How to select corresponding checkboxes
    Sorry If this seems straight but I donot have any idea how to approach this
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s how I would have solve this problem.

    First I’ll show you the working code and then I’ll explain it after.

        <?php

    $groups = array(
        12 => array(1, 2, 3, 4, 5),
        13 => array(32, 25, 26),
        14 => array(22, 23)
    );

    ?>
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>Page Title Goes Here</title>
            <style type="text/css">
              #group_id{ width:466px; }
            </style>
        </head>
        <body>

            <select name="group_id" id="group_id">
                <option value="0">Not a Group Event</option>
                <option value="12">Gname</option>
                <option value="13">Groupname2</option>
            </select>

            <?php 
                // Loop through each group id
                foreach(array_keys($groups) as $groupId)
                {
                    // Create a div that can be identified by the group id
                    // to hold the checkboxes
                    $divId = 'group_' . $groupId;
                    echo '<div id="' . $divId . '">';

                    // Loop through each id for this particular group
                    foreach($groups[$groupId] as $choice)
                    {
                        // Create the checkbox

                        echo '<input type="checkbox" '
                             .      'value="' . $choice . '" ' 
                             .      'class="frnzchk" '
                             .      'name="frnzchk[]"/>'
                             . '<br/>';
                    }   

                    echo '</div>';
                }
            ?>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">

            // Wait until everything is loaded 
            $(document).ready(function(){

                // Bind the "change" function to the group_id drop down
                $('#group_id').change(function(){

                    // Clear all of the choices
                    $('.frnzchk').attr('checked', false);

                    // Create the id of the div containing choices
                    var groupId = '#group_' + $(this).val();

                    // Check all of the choices for the appropriate group id
                    $(groupId)
                      .find('input[type="checkbox"]')
                        .attr('checked', true);
                })
            });

        </script>

        </body>
    </html>

    Here’s the first chunk:

        <?php

    $groups = array(
        12 => array(1, 2, 3, 4, 5),
        13 => array(32, 25, 26),
        14 => array(22, 23)
    );

    ?>

    This is your list of groups and the choices associated with them. Notice when you declare the array you don’t need the square brackets i.e. $groups = array() instead of $groups[] = array().

    Next I put in all of the plumbing for a complete HTML5 page that will validate[1]. I moved your CSS out of the HTML because it makes it easier to organize, and in practice this should be moved to a completely separate CSS file.

    Here’s the next important chunk:

                <?php 
                // Loop through each group id
                foreach(array_keys($groups) as $groupId)
                {
                    // Create a div that can be identified by the group id
                    // to hold the checkboxes
                    $divId = 'group_' . $groupId;
                    echo '<div id="' . $divId . '">';

                    // Loop through each id for this particular group
                    foreach($groups[$groupId] as $choice)
                    {
                        // Create the checkbox

                        echo '<input type="checkbox" '
                             .      'value="' . $choice . '" ' 
                             .      'class="frnzchk" '
                             .      'name="frnzchk[]"/>'
                             . '<br/>';
                    }   

                    echo '</div>';
                }
            ?>

    This loops through each of your groups, and creates a DIV to hold all of the choices for that group. The div is identified by the id group_12, group_13, or group_14; The numbers come from the keys used in the $groups array.

    Next is the Javascript:

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">

            // Wait until everything is loaded 
            $(document).ready(function(){

                // Bind the "change" function to the group_id drop down
                $('#group_id').change(function(){

                    // Clear all of the choices
                    $('.frnzchk').attr('checked', false);

                    // Create the id of the div containing choices
                    var groupId = '#group_' + $(this).val();

                    // Check all of the choices for the appropriate group id
                    $(groupId)
                      .find('input[type="checkbox"]')
                        .attr('checked', true);
                })
            });

        </script>

    I placed this all at the end of the body because Javascript runs in a single thread, so this means if you load it up front like you had it, nothing else can load until the javascript has finished loading[2]. In this example it’s not a big deal, but when you have a lot of javascript it can make a big difference!

    You’ll notice that I wrapped everything inside $(document).ready(function(){}) – this is because you don’t want it to work until everything is loaded. Since you had $(document).ready(function(){}) inside your function, every time that function gets called, it will check to see if everything is loaded, and if it’s not, then you won’t see anything happen.

    I bound the change() function to the select element, which means it will be called whenever the select element is changed, and the code inside that function will be called. We reset all of the choices, and then select all of the choices that are contained in the appropriate div.

    That should do it! Happy coding!

    [1] – http://validator.w3.org

    [2] – https://stackoverflow.com/a/1108245/1100835

    • 0