javascript - CheckboxList在ASP.NET中选中和取消选中

我有三个复选框列表，它们与数据库列表绑定。从数据库获取的值是不同的值。复选框与数据绑定后，我必须选择一个复选框。如果我从第一个复选框列表类别中选择了一个复选框，则它应该在第二个和第三个复选框列表中显示匹配的值。

例：

CheckboxList 1:
1.100
2.200
3.300
4.400

CheckboxList 2:
1.powder
2.Capsule
3.gel

CheckboxList 3:
1.10
2.30
3.30

如果我从复选框列表1中选择100，那么它应该仅从复选框列表2中启用粉末和胶囊，并从复选框列表3中启用10，并禁用其他选项，如果我从复选框1中选择了多个选项，则应该根据选择启用复选框。

最佳答案

您可以使用JavaScript（我使用jQuery）来避免刷新页面。

我定义了一种矩阵，该矩阵对应于第一个复选框列表的不同选择。

第一个复选框列表中的更改（选中的复选框）会触发一个功能，该功能将从该复选框列表中选中所有复选框。然后获取检查的值，例如01在矩阵matrix["01"]中获取相应的选择：0|1;第二个复选框列表将启用索引0的复选框，第三个复选框列表将启用索引1的复选框。

您可以在答案的底部尝试/运行HTML版本。

您可以在WebForm中尝试以下代码：

ASPX：

<asp:CheckBoxList ID="CheckBoxList1" onchange="manageCheckboxList();" runat="server">
    <asp:ListItem Value="0" Text="100"></asp:ListItem>
    <asp:ListItem Value="1" Text="200"></asp:ListItem>
    <asp:ListItem Value="2" Text="300"></asp:ListItem>
    <asp:ListItem Value="3" Text="400"></asp:ListItem>
</asp:CheckBoxList>

<hr />

<asp:CheckBoxList ID="CheckBoxList2" runat="server">
    <asp:ListItem Value="0" Text="Powder"></asp:ListItem>
    <asp:ListItem Value="1" Text="Capsule"></asp:ListItem>
    <asp:ListItem Value="2" Text="Gel"></asp:ListItem>
</asp:CheckBoxList>

<hr />

<asp:CheckBoxList ID="CheckBoxList3" runat="server">
    <asp:ListItem Value="0" Text="10"></asp:ListItem>
    <asp:ListItem Value="1" Text="20"></asp:ListItem>
    <asp:ListItem Value="2" Text="30"></asp:ListItem>
</asp:CheckBoxList>

JavaScript（jQuery）：

function manageCheckboxList() {
    // Get checkbox checked from first checkbox list
    var checked = $('#CheckBoxList1').find('input:checked');

    // Check if there's a least one checkbox checked
    if (checked.length > 0) {
        var matrix = {}
        matrix["0"] = "01|0";
        matrix["1"] = "12|01";
        matrix["2"] = "2|2";
        matrix["3"] = "1|0";
        matrix["01"] = "0|1";
        matrix["02"] = "0|2";
        matrix["03"] = "1|1";
        matrix["12"] = "1|2";
        matrix["13"] = "0|2";
        matrix["23"] = "12|12";
        matrix["012"] = "012|012";
        matrix["013"] = "012|012";
        matrix["023"] = "01|01";
        matrix["123"] = "12|02";
        matrix["0123"] = "012|012";

        var result = "";

        // Construct result
        $(checked).each(function () {
            result += $(this).val();
        });

        var subchoices = matrix[result].split('|');

        // Update Checkbox list 2 and 3
        updateCheckboxList($("#CheckBoxList2"), subchoices[0], false);
        updateCheckboxList($("#CheckBoxList3"), subchoices[1], false);
    } else {
        // Reset checkbox
        updateCheckboxList($("#CheckBoxList2"), null, false);
        updateCheckboxList($("#CheckBoxList3"), null, false);
    }
}

function updateCheckboxList(el, subchoices, disableCheckboxList) {
    var checkboxList = $(el).find("input");

    for (var i = 0; i < checkboxList.length; i++) {
        if (subchoices != null) {
            var disabled = true;

            if (subchoices.indexOf($(checkboxList[i]).val()) >= 0) {
                disabled = false;
            }

            $(checkboxList[i]).prop("disabled", disabled);
        } else {
            $(checkboxList[i]).prop("disabled", false);
        }
    }

    $(el).prop("disabled", disableCheckboxList);
}

请尝试以下代码片段（以HTML而不是ASPX）查看结果：

function manageCheckboxList() {
    // Get checkbox checked from first checkbox list
    var checked = $('#CheckBoxList1').find('input:checked');

    // Check if there's a least one checkbox checked
    if (checked.length > 0) {
        var matrix = {}
        matrix["0"] = "01|0";
        matrix["1"] = "12|01";
        matrix["2"] = "2|2";
        matrix["3"] = "1|0";
        matrix["01"] = "0|1";
        matrix["02"] = "0|2";
        matrix["03"] = "1|1";
        matrix["12"] = "1|2";
        matrix["13"] = "0|2";
        matrix["23"] = "12|12";
        matrix["012"] = "012|012";
        matrix["013"] = "012|012";
        matrix["023"] = "01|01";
        matrix["123"] = "12|02";
        matrix["0123"] = "012|012";

        var result = "";

        // Construct result
        $(checked).each(function () {
            result += $(this).val();
        });

        var subchoices = matrix[result].split('|');

        // Update Checkbox list 2 and 3
        updateCheckboxList($("#CheckBoxList2"), subchoices[0], false);
        updateCheckboxList($("#CheckBoxList3"), subchoices[1], false);
    } else {
        // Reset checkbox
        updateCheckboxList($("#CheckBoxList2"), null, false);
        updateCheckboxList($("#CheckBoxList3"), null, false);
    }
}

function updateCheckboxList(el, subchoices, disableCheckboxList) {
    var checkboxList = $(el).find("input");

    for (var i = 0; i < checkboxList.length; i++) {
        if (subchoices != null) {
            var disabled = true;

            if (subchoices.indexOf($(checkboxList[i]).val()) >= 0) {
                disabled = false;
            }

            $(checkboxList[i]).prop("disabled", disabled);
        } else {
            $(checkboxList[i]).prop("disabled", false);
        }
    }

    $(el).prop("disabled", disableCheckboxList);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="CheckBoxList1" onchange="manageCheckboxList();">
    <tr>
        <td>
            <input id="CheckBoxList1_0" type="checkbox" value="0" />
            <label for="CheckBoxList1_0">100</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="CheckBoxList1_1" type="checkbox" value="1" />
            <label for="CheckBoxList1_1">200</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="CheckBoxList1_2" type="checkbox" value="2" />
            <label for="CheckBoxList1_2">300</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="CheckBoxList1_3" type="checkbox" value="3" />
            <label for="CheckBoxList1_3">400</label>
        </td>
    </tr>
</table>

<hr />

<table id="CheckBoxList2">
    <tr>
        <td>
            <input id="CheckBoxList2_0" type="checkbox" value="0" />
            <label for="CheckBoxList2_0">Powder</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="CheckBoxList2_1" type="checkbox" value="1" />
            <label for="CheckBoxList2_1">Capsule</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="CheckBoxList2_2" type="checkbox" value="2" />
            <label for="CheckBoxList2_2">Gel</label>
        </td>
    </tr>
</table>

<hr />

<table id="CheckBoxList3">
    <tr>
        <td>
            <input id="CheckBoxList3_0" type="checkbox" value="0" />
            <label for="CheckBoxList3_0">10</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="CheckBoxList3_1" type="checkbox" value="1" />
            <label for="CheckBoxList3_1">20</label>
        </td>
    </tr>
    <tr>
        <td>
            <input id="CheckBoxList3_2" type="checkbox" value="2" />
            <label for="CheckBoxList3_2">30</label>
        </td>
    </tr>
</table>