Question

学生网格视图顶部有一个全部检查复选框，它控制复选框的开/关。我想在学生网格视图中打开和关闭复选框。这是我的代码：

$(document).ready(function () {
    $("#chkAll").click(function () {
        if ($(this).prop("checked") == "checked") {
            $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", "checked");
        }
        else {
            $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", "false");
        }    
    });    
});

它曾经在jQuery 1.4.xx中工作，但今天我升级到JQuery 1.8.1并且它不再有效。我需要什么才能让它再次运作？

Answer 1

根据您的选择器，您似乎对ID使用相同的checkboxes。

提供不同的ID或使用class选择器。

Answer 2

这一行返回true或false，但不是“checked”，猜测这就是原因

$(this).prop("checked")

检查/取消选中

$(this).prop("checked",true)  //check
$(this).prop("checked",false) //uncheck

Answer 3

这就是你应该需要的：

$("#chkAll").click(function () {
    var checkAll = $(this).prop("checked");
    $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", checkAll);
});

实例：http://jsfiddle.net/3ZfzS/

但为了使其更具直观性，当取消选中其中一个或多个时，您应该取消选中“checkAll”复选框。这可以通过以下添加来完成：

$("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').click(function(){
    var total = $("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').size();
    var checked = $("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').filter(':checked').size();
    $("#chkAll").prop("checked",total == checked);
});

实例：http://jsfiddle.net/xV2ej/

jQuery切换复选框

3 个答案: