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

Posted 2023-03-05

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

【英文标题】：ASP.NET WebForms Checking all Checkboxes in a GridView using jQuery v1.9.0 doesn't work

【发布时间】：2013-01-07 03:45:29

【问题描述】：

我的应用程序有关于 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 中的更改还是错误造成的。

【参考方案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();
    );
);

【讨论】：

我已经尝试使用 jQuery v1.9.0 从 .live 切换到 .on，但它只工作一次，然后什么也没有。

您的脚本适用于 JSBin，但不适用于我的应用程序。我什至将您的 JSBin html 和 JS 代码原样复制/粘贴到 HTML 文件上，但它在任何浏览器上都不起作用。如果我选中全选复选框，则不会出现任何内容。

它不起作用，因为你需要适应ASP.NET生成控件ID的方式；就像你做的一样。我把那部分省略了，希望你能理解这一点，并且你确实设法让它发挥作用。恭喜... :)

当然，我知道。我首先尝试从 JSBin 中获取您的代码，然后将 HTML 和 JS 复制/粘贴到一个 html 文件（相同的控件 ID）上，但没有成功……我认为这是由于 $(document).ready(function() 中的 ToggleCheckUncheckAllOptionAsNeeded() 造成的。无论如何，您的解决方案是正确的。

【参考方案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;
 

【讨论】：

我可以使用它，但我更想知道 jQuery 的问题出在哪里，因为我在其他应用程序上使用它，而且我使用定期更新的 CDN。

【参考方案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>