ASP.NET WebForms 使用 jQuery v1.9.0 检查 GridView 中的所有复选框不起作用

Question

我的应用程序有关于 jQuery 的问题。我尝试了一个代码示例（http://aspnet.4guysfromrolla.com/articles/120810-1.aspx）来使用标题复选框来检查/取消选中 GridView 中的所有行。示例代码适用于 jQuery v1.4.4，但不适用于最新的 jQuery 版本 v1.9.0。

这是代码。

<script type="text/javascript">
    var allCheckBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkAll"]:checkbox';
    var checkBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkSelected"]:checkbox';

    function ToggleCheckUncheckAllOptionAsNeeded() {
        var totalCheckboxes = $(checkBoxSelector),
            checkedCheckboxes = totalCheckboxes.filter(":checked"),
            noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
            allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

        $(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
    }

    $(document).ready(function () {
        $(allCheckBoxSelector).live('click', function () {
            $(checkBoxSelector).attr('checked', $(this).is(':checked'));

            ToggleCheckUncheckAllOptionAsNeeded();
        });

        $(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);

        ToggleCheckUncheckAllOptionAsNeeded();
    });
</script>

使用 jQuery v1.4.4 一切正常。使用 jQuery v1.9.0 每次页面加载我都会收到“对象不支持此属性或方法：.live”错误。如果我使用语法：

$(allCheckBoxSelector).click(function () {...

我避免了错误，而不是上面的那个，但标题复选框只工作一次。如果我再次单击它，则不会出现任何内容。

我也尝试了 .on 语法：

$(allCheckBoxSelector).on('click', function () {...

但它也不起作用。

我想知道这个问题是由于 jQuery v1.9.0 中的更改还是错误造成的。

Answer 1

jQuery live 现在应该替换为 on。如果代码在您更改 live 之后应该可以正常工作。

我找到了问题的根源：必须使用.prop 而不是.attr。我也对代码做了一些小的修改。

这是一个关于 JS Bin 的工作演示：http://jsbin.com/egopar/4/edit

这是 jQuery 1.9 的工作代码：

 $(document).ready(function () {

    var allCheckBoxSelector = $('#chkAll');

    var checkBoxSelector = $('input:checkbox:not(#chkAll)');

    function ToggleCheckUncheckAllOptionAsNeeded() {
        var totalCheckboxes = $(checkBoxSelector),
            checkedCheckboxes = totalCheckboxes.filter(":checked"),
            noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
            allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

        //console.log(allCheckboxesAreChecked);

        $(allCheckBoxSelector).prop('checked', allCheckboxesAreChecked);
    }

    $(allCheckBoxSelector).on('click', function () {
        $(checkBoxSelector).prop('checked', $(this).is(':checked'));

        ToggleCheckUncheckAllOptionAsNeeded();
    });

    $(checkBoxSelector).on('click', function () {
        ToggleCheckUncheckAllOptionAsNeeded();
    });
});

Answer 2

如果您没有在页面的其他任何地方使用 jQuery，您可以使用非常简单的 javascript 来执行此操作。有很多方法可以做到这一点，但这对我有用，可以附加到按钮、链接等。checkid 是客户端 ID，选择 true 或 false。

function checktoggle(checkid,select){
var check=document.getElementById(checkid);
var numinput=check.getElementsByTagName('input');
 for (i=0; i<numinput.length; i++){
  numinput[i].checked=select;
 }
}

Answer 3

解决了！

感谢 Leniel Macaferi 的建议，我使用了 .on 和 .prop 方法，而不是 .live 和 .attr，但我对脚本进行了不同的实现，最终在我的应用程序上与 jQuery v1.9.0 一起使用。

<script type="text/javascript">
    var allCheckBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkAll"]:checkbox';
    var checkBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkSelected"]:checkbox';

    function ToggleCheckUncheckAllOptionAsNeeded()
    {
        var totalCheckboxes = $(checkBoxSelector),
            checkedCheckboxes = totalCheckboxes.filter(":checked"),
            noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
            allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

        $(allCheckBoxSelector).prop('checked', allCheckboxesAreChecked);
    }

    $(document).ready(function()
    {
        $(allCheckBoxSelector).on('click', function()
        {
            $(checkBoxSelector).prop('checked', $(this).is(':checked'));

            ToggleCheckUncheckAllOptionAsNeeded();
        });

        $(checkBoxSelector).on('click', ToggleCheckUncheckAllOptionAsNeeded);

        ToggleCheckUncheckAllOptionAsNeeded();
    });
</script>