我需要创建一个基于jquery的界面，其中更改select会导致标记适当的checkebox。例如，我在下拉列表中列出每个组都有其成员。例如，A组有5名成员。当用户选择groupA时，会列出每个成员。所有复选框（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>
我有2个问题
答案 0 :(得分：2)
以下是我如何解决这个问题。
首先，我会告诉你工作代码然后我会解释它。
<?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>
这是第一个块：
<?php
$groups = array(
12 => array(1, 2, 3, 4, 5),
13 => array(32, 25, 26),
14 => array(22, 23)
);
?>
这是您的组列表以及与之关联的选项。请注意，当您声明数组时，您不需要方括号，即$groups = array()而不是$groups[] = array()。
接下来，我将完整的HTML5页面放入所有管道，验证[1]。我将CSS移出HTML，因为它使组织更容易，实际上这应该移动到一个完全独立的CSS文件。
这是下一个重要的块：
<?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>';
}
?>
循环遍历每个组，并创建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).ready(function(){})中 - 这是因为您不希望它在所有内容都加载之后才能工作。由于你的函数内部有$(document).ready(function(){})，每次调用该函数时，都会检查是否所有内容都已加载，如果没有，那么你就不会看到任何事情发生。
我将change()函数绑定到select元素，这意味着只要更改select元素就会调用它，并且将调用该函数内的代码。我们重置所有选项，然后选择相应div中包含的所有选项。
应该这样做！快乐的编码！
[1] - http://validator.w3.org