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

Question

我的应用程序有一个关于 jQuery 的问题。我尝试了一个代码示例 ( https://web.archive.org/web/20210513220745/http://aspnet.4guysfromrolla.com/articles/120810-1.aspx ) 使用 Header CheckBox 来选中/取消选中 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 () {...

而不是上面的错误，我避免了错误，但 Header Checkbox 只工作一次。如果我再次单击它，则没有任何反应。

我还尝试了 .on 语法:

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

但它也不起作用。

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

Answer 1

jQuery live 现在应该被 on 取代。如果代码之前有效，它应该在您更改后有效。

我找到了问题的根源:必须使用 .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();
    });
});