Question

我有一个小组列表和人员名单如下：

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。

Answer 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}}

Answer 2

我做了一个使用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>

Answer 3

更改已更改的问题：

鉴于指定了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);
            } );
        }
    } );
} );

See it in action at jsFiddle.

假设您的关联是这样的：

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);
            } );
        }
    } );
} );

See it in action at jsFiddle.

重要说明：

请注意，HTML是干净且语义的。
请注意，可点击的label代码使其更加用户友好。
请注意仅在点击时触发的答案！用户可以并且希望在您的网站上使用键盘等。此外，这是一项要求和/或法律，具体取决于您所在的位置。
问题未正确指定行为。在这里，做出了最好的假设（单击一个CB组，强制所有名称CB匹配组CB，组合状态）。

选中组复选框时自动检查相关复选框

3 个答案:

重要说明：