Question

我有两个列的两个复选框，所以一旦它点击select all 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>

Answer 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中有很多方法可以做到这一点，但这种方式是第一次出现在我脑海中。

gridview中的两个多选复选框列

1 个答案: