我有一个小组列表和人员名单如下：
Groups
# | Group Name
---------------
[] | Grp 1
[] | Grp 2
[] | Grp 3
Persons
# | Name
-----------
[] | Name 1
[] | Name 2
[] | Name 3
[] | Name 4
[] | Name 5
[] | Name 6
现在，群组包含人数中列出的一些人。我想要的是当用户点击某些组时，如果尚未点击属于该组的人员也应自动点击。我怎么能在js中做到这一点？
由于ajax请求，这两个列表都来自数据库。
修改
从servlet生成响应的html如下所示：
<h4>Groups</h4>
<table width="100%" border="0" cellspacing="10">
<tr>
<td>
<input type="checkbox" id="group 1" name="group 1" value="person1,person2,person3" /> Gorup 1
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="group 2" name="group 2" value="person4,person5" /> Gorup 2
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="group 3" name="group 3" value="person2" /> Gorup 3
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="group 2" name="group 2" value="person1,person5" /> Gorup 4
</td>
</tr>
</table>
<h4>Persons</h4>
<table width="100%" border="0" cellspacing="10">
<tr>
<td>
<input type="checkbox" id="person1" name="person1" value="person1" /> person1
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="person2" name="person2" value="person2" /> person2
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="person3" name="person3" value="person3" /> person3
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="person4" name="person4" value="person4" /> person4
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="person5" name="person5" value="person5" /> person5
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="person6" name="person6" value="person6" /> person6
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="person7" name="person7" value="person7" /> person7
</td>
</tr>
</table>
你可以称之为我拥有并且必须操纵的样本html。
答案 0 :(得分：1)
第1步 - 了解如何在JavaScript中存储Groups和Persons之间的关系。这样的事情应该足够了：
groups = {
group1: ["name1", "name2"],
group2: ["name3", "name5"],
group3: ["name4", "name6"]
};
在这个例子中，“group”后缀的{1, 2, 3}是group-id，这可能是你应该拥有的，因为你的服务器正在向你发送组列表，它几乎肯定会将它们从数据库中拉出来它们由数字ID唯一标识。同名的{1, 2, 3, 4, 5, 6}后缀为“name”。这些提供了在页面中查找所需内容的机制。
第2步 - 提供一个模板，用于显示您的数据，为您提供足够的钩子。例如，像：
<div class="group">
<input type="checkbox" id="group${group.id}" onclick="toggleGroups(this);" />Group 1
</div>
...和
<div class="name">
<input type="checkbox" id="name${name.id}" />Name 1
</div>
第3步 - 为您的组复选框实现JavaScript处理函数。类似的东西：
function toggleGroups(checkBox) {
var members = groups[checkBox.id];
for (var index = 0; index < members.length; index++) {
var memberId = members[index];
document.getElementById(memberId).checked = checkBox.checked;
}
}
你已经完成了。最终结果如下：http://jsfiddle.net/8wBg7/
或者，您可能需要考虑步骤4 - 使关系成双向并确保始终强制执行（即保持您的界面正常）。它需要相当多的代码，但它也使事情变得更好。
以下是一个示例：http://jsfiddle.net/8wBg7/7/
编辑 - 这是一个适用于您的确切示例标记，减去一些明显的拼写错误（还包括按键处理程序，而不依赖于jQuery）：{{ 3}}
答案 1 :(得分：0)
我做了一个使用Jquery显示您想要的功能的示例，尽管我使用了除人和组之外的不同主题。看看：http://jsfiddle.net/ftdaP/
使用Javascript：
$("#fruit").click(function(){
$("input").prop("checked",false);
$(".fruit").prop("checked", true);
});
$("#veggies").click(function(){
$("input").prop("checked",false);
$(".veggy").prop("checked", true);
});
HTML：
<input type="checkbox" class="fruit">Apple</input>
<input type="checkbox" class="fruit">Pear</input>
<input type="checkbox" class="fruit">Orange</input>
<input type="checkbox" class="veggy">Tomato</input>
<input type="checkbox" class="fruit">Plum</input>
<input type="checkbox" class="veggy">Green Bean</input>
<a href="#" id="veggies">Veggies</a>
<a href="#" id="fruit">Fruit</a>
答案 2 :(得分：0)
更改已更改的问题：
鉴于指定了HTML结构，请使用jQuery激活复选框，javascript如下：
$("input:checkbox[name^='group']").change ( function () {
/*--- Because groups might overlap, we must set the checkboxes based on all
Group CB values.
*/
$("input:checkbox[name^='person']").attr ('checked', false); //-- Clear all, to start.
$("input:checkbox[name^='group']").each ( function () {
//--- Loop through each group CB.
var nameList = $(this).val ();
var isChecked = $(this).attr ('checked') || false;
if (isChecked) {
//--- Set each name in the group.
$.each (nameList.split (','), function (J, nameId) {
$("#" + nameId).attr ('checked', true);
} );
}
} );
} );
假设您的关联是这样的：
var associations = { Grp_1: ['Name_1', 'Name_3', 'Name_5'],
Grp_2: ['Name_2', 'Name_4', 'Name_6'],
Grp_3: ['Name_3', 'Name_6']
};
和HTML一样：
<ul id="GroupList">Groups:
<li><label><input type="checkbox" value="Grp_1" name="cb_Grp">Grp 1</label></li>
<li><label><input type="checkbox" value="Grp_2" name="cb_Grp">Grp 2</label></li>
<li><label><input type="checkbox" value="Grp_3" name="cb_Grp">Grp 3</label></li>
</ul>
<ul id="PersonList">Persons:
<li><label><input type="checkbox" value="Name_1" name="cb_Name">Name 1</label></li>
<li><label><input type="checkbox" value="Name_2" name="cb_Name">Name 2</label></li>
<li><label><input type="checkbox" value="Name_3" name="cb_Name">Name 3</label></li>
<li><label><input type="checkbox" value="Name_4" name="cb_Name">Name 4</label></li>
<li><label><input type="checkbox" value="Name_5" name="cb_Name">Name 5</label></li>
<li><label><input type="checkbox" value="Name_6" name="cb_Name">Name 6</label></li>
</ul>
然后jQuery，javascript代码就像这样：
$("#GroupList input:checkbox").change ( function () {
/*--- Because groups might overlap, we must set the checkboxes based on all
Group CB values.
*/
$("#PersonList input:checkbox").attr ('checked', false); //-- Clear all, to start.
$("#GroupList input:checkbox").each ( function () {
//--- Loop through each group CB.
var grpName = $(this).val ();
var isChecked = $(this).attr ('checked') || false;
if (isChecked) {
var nameList = associations[grpName];
//--- Set each name in the group.
$.each (nameList, function (J, nameVal) {
$("#PersonList input[value='" + nameVal + "']").attr ('checked', true);
} );
}
} );
} );
请注意，HTML是干净且语义的。
请注意，可点击的label代码使其更加用户友好。
请注意仅在点击时触发的答案！用户可以并且希望在您的网站上使用键盘等。此外，这是一项要求和/或法律，具体取决于您所在的位置。
问题未正确指定行为。在这里，做出了最好的假设（单击一个CB组，强制所有名称CB匹配组CB，组合状态）。