gridview 内的两个多选复选框列答案

【问题标题】：Two multi select checkboxes column inside gridviewgridview 内的两个多选复选框列
【发布时间】：2014-01-25 04:27:05
【问题描述】：

我有两个用于两列的复选框，因此一旦单击全选 headerChkbox，它只应为所有 chkStatus 选中，并且与 chkUpdate 相同

但是当我要选择任何一个时，下面的代码会同时选择和取消选择。但我想让它们彼此独立。意味着当我选择 headerChkbox 时，该特定列中的所有复选框只应该被选中或取消选中其他也一样

<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
    <HeaderStyle Width="50px" HorizontalAlign="Center" />
    <ItemStyle HorizontalAlign="Left" />
    <ItemTemplate>
        <asp:CheckBox ID="chkStatus" runat="server" Width="15px" Checked='<%# Convert.ToBoolean(Eval("isAssignJD")) %>' />
    </ItemTemplate>
    <HeaderTemplate>
        <asp:CheckBox ID="headerChkbox" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);" />
    </HeaderTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplate">
    <HeaderStyle Width="50px" HorizontalAlign="Center" />
    <ItemStyle HorizontalAlign="Left" />
    <ItemTemplate>
        <asp:CheckBox ID="chkUpdate" runat="server" Width="15px" Checked="false" />
    </ItemTemplate>
    <HeaderTemplate>
        <asp:CheckBox ID="headerUpdate" runat="server"  onclick="javascript:SelectAllCheckboxesSpecific(this);" />
    </HeaderTemplate>
</telerik:GridTemplateColumn>

这是我的功能

function SelectAllCheckboxesSpecific(spanChk) {
    //  Select checkboxes that place in grid
    var IsChecked = spanChk.checked;
    var Chk = spanChk;
    Parent = document.getElementById('ctl00_ContentPlaceHolder1_gvJobPosition');
    var items = Parent.getElementsByTagName('input');
    for (i = 0; i < items.length; i++) {
        if (items[i].id != Chk && items[i].type == "checkbox") {
            if (items[i].checked != IsChecked) {
                items[i].click();
            }
        }
    }
}

这是我的 Html 渲染代码

<tr class="rgRow" id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00__0">
    <td style="display:none;">0561fb4f-e410-4d83-a0e5-6d6d68fe3dba</td><td align="left">
                                    <span class="category1" style="display:inline-block;width:15px;"><input id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00_ctl04_chkStatus" type="checkbox" name="ctl00$ContentPlaceHolder1$gvJobPosition$ctl00$ctl04$chkStatus" checked="checked" /></span>
                                </td><td align="left">
                                    <span class="category2" style="display:inline-block;width:15px;"><input id="ctl00_ContentPlaceHolder1_gvJobPosition_ctl00_ctl04_chkStatuss" type="checkbox" name="ctl00$ContentPlaceHolder1$gvJobPosition$ctl00$ctl04$chkStatuss" /></span>
                                </td>

【问题讨论】：

我用一个工作示例更新了代码，只是不要忘记包含 jQuery js 文件。

标签： javascript asp.net telerik telerik-grid

【解决方案1】：

这一行是你的问题：

var items = Parent.getElementsByTagName('input');

您正在选择页面上的所有个复选框。为什么不使用 jQuery？这要容易得多：

为类别 1 中的所有复选框提供 class="category1" 并为类别 2 中的所有复选框提供 class="category2"。

然后为标题复选框提供 class="setAll1" 和 class="setAll2"。然后写：

$(document).ready(function(){
    $('.setAll1').click(function(){
        if($('.setAll1').is(':checked'))
            $('.category1').prop('checked',true);
        else 
            $('.category1').prop('checked',false);
    });
    $('.setAll2').click(function(){
        if($('.setAll2').is(':checked'))
            $('.category2').prop('checked',true);
        else
            $('.category2').prop('checked',false);
    });
});

对于 html：

<body>
    <input type=checkbox class="setAll1"/>
    <input type=checkbox class="category1"/><input type=checkbox class="category1"/><input type=checkbox class="category1"/>
    <br/><br/><br/>
    <input type=checkbox class="setAll2"/>
    <input type=checkbox class="category2"/><input type=checkbox class="category2"/><input type=checkbox class="category2"/>
</body>

在 jQuery 中有很多方法可以做到这一点，但这是我第一个想到的方法。

【讨论】：

你能给我看一些示例代码，我是 Jquery 的新手，Javascript
我认为 asp: checkbox 不像 html 复选框那样呈现为复选框。它创建一个跨度，并将类分配给跨度，而不是复选框。可能您必须使用$('.setAll1 input:checkbox') 而不是$('.setAll1')。或者使用 html 复选框。
我测试并修复了代码，但它使用常规复选框，如图所示。
这段代码完全可以在我的机器上运行。向我们展示您到目前为止所拥有的。您在 JS 控制台中遇到任何错误吗？看这里：jsfiddle.net/d8vuK
@Ameer Ali - 由于这个答案需要一些小的修改，我不想发布另一个答案。我的建议是，您必须将所有$('.AspCheckBoxClass') 替换为$('.AspCheckBox input:checkbox')。你可以在 firebug 中调试，看看你的代码是否得到了正确的元素。