Javascript ASP.NET WebForms使用jQuery v1.9.0检查GridView中的所有复选框无效

关于jQuery，我的应用程序有问题。我尝试了一个代码示例，使用标题复选框来选中/取消选中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>

我避免了上面的错误，但是Header复选框只工作一次。如果我再次点击它，什么都不会出现

我还尝试了.on语法：

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

但它也不起作用

---

我想知道这个问题是否是由于jQueryV1.9.0中的更改或错误造成的。

jQueryLive现在应该替换为on。如果代码在您更改live by on之后工作，那么它应该在您更改live by on之后工作

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

下面是一个关于JS-Bin的工作演示：

以下是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，那么可以使用非常简单的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;
 }
}

解决了

多亏了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>

---

我已经尝试使用jQueryV1.9.0从.live切换到.on，但它只工作一次，然后就什么都没有了。您的脚本在JSBin上工作，但在我的应用程序上不工作。我甚至将你的JSBin HTML和JS代码原样复制/粘贴到一个HTML文件上，但它在任何浏览器上都不起作用。如果我选中“全选”复选框，则不会显示任何内容。它不起作用，因为您需要使其适应ASP.NET生成控件ID的方式；跟你一样。我把那部分删掉了，希望你能理解这一点，你确实设法让它工作起来了。祝贺…：当然，我知道。我第一次尝试从JSBin获取您的代码，并将HTML和JS复制/粘贴到一个HTML文件（相同的控件ID），但没有成功。。。我认为这是因为$document.readyfunction中需要切换CheckUncheckAlloption。无论如何，你的解决方案是正确的。我可以使用这个，但我更想知道jQuery的问题在哪里，因为我在其他应用程序上使用它，并且我使用定期更新的CDN。

<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>