javascript - Check Box在gridview中以行索引方式被选中

Question

我想在 GridView 中以行索引方式选择复选框值，有人可以建议如何选择复选框吗？请在下面找到无法正常工作的代码。

        function Check_Click(spanChk) {
            {
                var IsChecked = spanChk.checked;

                var Chk = spanChk;

                Parent = document.getElementById('Gv1');

                var btn = document.getElementById('<%=btnsubmit.ClientID %>');

                var items = Parent.getElementsByTagName('input');
                var i = 0;
                var tot = 0;
                for (i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        tot = tot + 1;

                        if (tot > 2) {
                            alert('Cannot check more than 2 check boxes');
                            items[i].checked = false;
                            return;
                        }
                    }
                }

            }
        }

这是我的 GridView 文件

         <asp:GridView ID="Gv1" runat="server" AutoGenerateColumns="False" OnRowDataBound="Gv1_RowDataBound">
        <Columns>
            <asp:BoundField DataField="datedif" HeaderText="Day/Hour" SortExpression="datedif" />
            <asp:TemplateField HeaderText="Hour1">
                <EditItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" Enabled='<%# Eval("hour1").ToString().Equals("False") %>' OnCheckedChanged="CheckBox1_CheckedChanged" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour2">
                <EditItemTemplate>
                    <asp:CheckBox ID="CheckBox2" runat="server" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox2" runat="server" Enabled='<%# Eval("hour2").ToString().Equals("False") %>' OnCheckedChanged="CheckBox6_CheckedChanged" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour3">
                <EditItemTemplate>
                    <asp:CheckBox ID="CheckBox3" runat="server" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox3" runat="server" Enabled='<%# Eval("hour3").ToString().Equals("False") %>' OnCheckedChanged="CheckBox3_CheckedChanged" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour4">
                <EditItemTemplate>
                    <asp:CheckBox ID="CheckBox4" runat="server" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox4" runat="server" Enabled='<%# Eval("hour4").ToString().Equals("False") %>' OnCheckedChanged="CheckBox4_CheckedChanged" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour5">
                <EditItemTemplate>
                    <asp:CheckBox ID="CheckBox5" runat="server" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox5" runat="server" Enabled='<%# Eval("hour5").ToString().Equals("False") %>' OnCheckedChanged="CheckBox5_CheckedChanged" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Answer 1

从所有 CheckBoxes 调用 JavaScript 函数，如下所示，

<asp:GridView ID="Gv1" runat="server" AutoGenerateColumns="False" OnRowDataBound="Gv1_RowDataBound">
        <Columns>
            <asp:BoundField DataField="datedif" HeaderText="Day/Hour" SortExpression="datedif" />
            <asp:TemplateField HeaderText="Hour1">
                <EditItemTemplate>
                    <asp:CheckBox ID="chkColumn1" runat="server" onclick="Check_Click(this)" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkHour1" runat="server" Enabled='<%# Eval("hour1").ToString().Equals("False") %>'
                        OnCheckedChanged="CheckBox1_CheckedChanged" onclick="Check_Click(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour2">
                <EditItemTemplate>
                    <asp:CheckBox ID="ChkColumn2" runat="server" onclick="Check_Click(this)" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkHour2" runat="server" Enabled='<%# Eval("hour2").ToString().Equals("False") %>'
                        OnCheckedChanged="CheckBox6_CheckedChanged" onclick="Check_Click(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour3">
                <EditItemTemplate>
                    <asp:CheckBox ID="chkColumn3" runat="server" onclick="Check_Click(this)" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkHour3" runat="server" Enabled='<%# Eval("hour3").ToString().Equals("False") %>'
                        OnCheckedChanged="CheckBox3_CheckedChanged" onclick="Check_Click(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour4">
                <EditItemTemplate>
                    <asp:CheckBox ID="chkColumn4" runat="server" onclick="Check_Click(this)" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkHour4" runat="server" Enabled='<%# Eval("hour4").ToString().Equals("False") %>'
                        OnCheckedChanged="CheckBox4_CheckedChanged" onclick="Check_Click(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Hour5">
                <EditItemTemplate>
                    <asp:CheckBox ID="chkColumn5" runat="server" onclick="Check_Click(this)" />
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkHour5" runat="server" Enabled='<%# Eval("hour5").ToString().Equals("False") %>'
                        OnCheckedChanged="CheckBox5_CheckedChanged" onclick="Check_Click(this)" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

并且在 JavaScript 中，使用其 Row 验证所选的 CheckBox，然后验证所选项目的数量。

     function IdExists(elements, id) {
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id.indexOf(id) > -1) {
                return true;
            }
        }
        return false;
    }

    function Check_Click(chkBx) {
        Parent = document.getElementById('<% =Gv1.ClientID %>');
        for (i = 0; i < Parent.rows.length; i++) {

            var row = Parent.rows[i];
            var items = row.getElementsByTagName('input');

            if (items.length > 0) {
                if (IdExists(items, chkBx.id)) {
                    var tot = 0;
                    for (j = 0; j < items.length; j++) {

                        if (items[j].type == 'checkbox' && items[j].checked) {

                            tot = tot + 1;

                            if (tot > 2) {
                                alert('Cannot check more than 2 check boxes');
                                chkBx.checked = false;
                                return;
                            }
                        }
                    }
                }
            }
        }
    }