3

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

4

3 回答 3

2

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();
    });
});
于 2013-01-23T15:48:41.460 回答
0

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

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;
 }
}
于 2013-01-23T15:58:24.437 回答
0

解决了！

感谢 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>
于 2013-01-24T09:08:44.137 回答