Question

我的应用程序有关jQuery的问题。我尝试了一个代码示例（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 () {...

而不是上面的那个，我避免错误，但标题复选框只能工作一次。如果我再次点击它没有任何附加信息。

我也尝试过.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();
    });
});

Answer 2

如果您未在页面中的任何其他位置使用jQuery，则可以使用非常简单的javascript来执行此操作。有很多方法可以做到这一点，但这对我有用，可以附加到按钮，链接等.idid是客户端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;
 }
}

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>

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

3 个答案: