Question

点击标题复选框后，我有一个GridView。我想检查ItemTemplate中的所有CheckBox。

我已尝试通过Jquery实现，但它不起作用，如

 $(document).ready(function () {
        $('#<%=ChkSelectAll.ClientID %>').click(function () {
            $('#<%=ChkSelectAll.ClientID %>').is(":checked")(function () {
                $('#<%=ChkSelect.ClientID %>').prop('checked', true);
            });
        });
    });

我有一个Gridview为

<Columns>
            <asp:TemplateField HeaderStyle-Width="20px">
                <HeaderTemplate>
                    <asp:CheckBox ID="ChkSelectAll" runat="server"  />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="ChkSelect" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
</Column>

感谢您的帮助。

Answer 1

如果您有许多复选框而不是使用ID而不是ID，请检查此fiddle，因为ID应该是唯一的

$('#ChkSelectAll').click(function () {
if($(this).is(":checked")){
    $('.ChkSelect').prop('checked', true);
}
});

已编辑的代码fiddle

$('#ChkSelectAll').click(function () {
  if($(this).is(":checked")){
    $('.ChkSelect').prop('checked', true);
  }else{
    $('.ChkSelect').prop('checked', false);
  }
});

Answer 2

$("#ChkSelectAll").click(function(){
if($(this).is(":checked")){
$('#ChkSelect').attr('checked', true);
}
else{
$('#ChkSelect').attr('checked', false);
}
}

Answer 3

gridview将具有每行的唯一ID，因此您无法使用单个ID更改所有这些ID。

更改

$('#<%=ChkSelect.ClientID %>').prop('checked', true);

要

$('[id*=ChkSelect]').prop('checked', true);

您可以缩短代码。

$(document).ready(function () {
      $('#<%=ChkSelectAll.ClientID %>').click(function () {           
            $('[id*=ChkSelect]').prop('checked', this.checked);           
      });
});

Answer 4

我尝试了在stackoverflow上找到的几个解决方案，但没有一个有效。我使用jquery-1.9.1.min.js和chrome来测试它。这是我的工作解决方案

$(document).ready(function() {
  $('#goOffline').click(function(event) {
    if($('#goOffline').is(':checked')){
        $('#goOffline').attr("checked","checked");
    } else {
        $('#goOffline').removeAttr("checked");
    }
});

}）;

基本上发生的是我在点击事件中使用$（'＃goOffline'）来选择复选框元素。然后我测试它是否被检查。如果选中它，则选中附加属性，如果没有，则删除已检查的属性。请注意，我的html输入标记如下所示：

<label for="goOffline" class="checkbox">
<input type="checkbox" name="goOffline" id="goOffline">
    Go offline
</label>

使用jquery检查并取消选中CheckBox

4 个答案: