Php 根据从下拉列表中选择的选项选择相应的复选框_Php_Javascript_Jquery_Html

Php 根据从下拉列表中选择的选项选择相应的复选框

php javascript jquery html

Php 根据从下拉列表中选择的选项选择相应的复选框,php,javascript,jquery,html,Php,Javascript,Jquery,Html,我需要制作一个基于jquery的界面，在这个界面中，select的更改会导致相应的checkebox被标记。例如，我在下拉列表中列出了每个组的成员。例如，A组有5名成员。当用户选择组时，会列出每个成员所有复选框5用户复选框将自动选中这是我现在拥有的 <?php $groups[]= array(12 => array ( 1,2,3,4,5),13=>array ( 32,25,26),14=>array(22,23)); ?> <script src="

我需要制作一个基于jquery的界面，在这个界面中，select的更改会导致相应的checkebox被标记。例如，我在下拉列表中列出了每个组的成员。例如，A组有5名成员。当用户选择组时，会列出每个成员所有复选框5用户复选框将自动选中这是我现在拥有的

<?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>

我有两个问题

我如何管理PHP数组，它可以有100个组，那么如何在javascript中实现这一点呢如何选择相应的复选框对不起，如果这似乎是直截了当的，但我不知道如何处理这个问题

下面是我解决这个问题的方法

首先我将向您展示工作代码，然后我将解释它

    <?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>

这将在每个组中循环，并创建一个DIV来保存该组的所有选项。div由id group_12、group_13或group_14标识；这些数字来自$groups数组中使用的键

接下来是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>

我把这些都放在正文的末尾，因为Javascript在一个线程中运行，所以这意味着如果您像以前一样提前加载它，那么在Javascript完成加载之前，其他任何东西都无法加载[2]。在本例中，这并不是什么大问题，但是当您有很多javascript时，它会产生很大的不同

您会注意到，我将所有内容都包装在$document.readyfunction{}中，这是因为您不希望在加载所有内容之前都能正常工作。由于您的函数中有$document.readyfunction{}，因此每次调用该函数时，它都会检查是否加载了所有内容，如果没有加载，则不会看到任何事情发生

我将change函数绑定到select元素，这意味着每当select元素被更改时都会调用它，并且会调用该函数中的代码。我们重置所有选项，然后选择相应div中包含的所有选项

那就够了！快乐编码

[1] -

[2] -

我希望在这里得到的是从下拉列表中选择GROUPNAME2。。。使用jquery选中值为32,25,26的复选框复选框和选项的关系在哪里？值为13的选项组名称2将选中复选框32,25,26。选项是一个组，其中as复选框对应于usersWow！这是一个很好的解释。非常感谢你在这方面花时间。你能讨论一些其他的事情吗，比如如果一个用户是两个组的成员。另外，如果有任何方法可以让组成员不在一起，比如A组的Checkboxuser\u，B组的Checkboxuser\u，但我最担心的是有一个用户参与了多个组绝对是，但是先做一些研究，尝试自己修改代码。明天我应该有时间填写这些问题，我会编辑原始帖子，把它们包括进来。

            <?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>