ASP.NET WebForms Checking all Checkboxes in a GridView using jQuery v1.9.0 doesn't work

Question

I've a problem with my application regarding jQuery. I tried a code example ( https://web.archive.org/web/20210513220745/http://aspnet.4guysfromrolla.com/articles/120810-1.aspx ) to use a Header CheckBox to check/uncheck all rows inside a GridView. The sample code works with jQuery v1.4.4 but doesn't work with the latest jQuery release v1.9.0.

Here's the code.

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

With jQuery v1.4.4 everything works perfect. Using jQuery v1.9.0 every page load I get a "Object doesn't support this property or method: .live" error. If I use the syntax:

$(allCheckBoxSelector).click(function () {...

instead of the one above, I avoid the error but the Header Checkbox works only once. If I click it again nothing appens.

I also tried the .on syntax:

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

but it doesn't work too.

I'd like to know if that issue is due to a change or a bug in jQuery v1.9.0.

Leniel Maccaferri · Accepted Answer · 2013-01-23 16:42:39Z

2

jQuery live should now be replaced by on. If the code worked before it should just work after you change live by on.

I got to the bottom of the problem: had to use .prop instead of .attr. I made some small modifications in the code too.

Here's a working demo on JS Bin: http://jsbin.com/egopar/4/edit

Here's the working code for 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();
    });
});

edited Jan 23, 2013 at 16:42

answered Jan 23, 2013 at 15:48

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cheshire Cat Over a year ago

I already tried with jQuery v1.9.0 to switch from .live to .on but it works once and then nothing.

Cheshire Cat Over a year ago

Your script works on JSBin but not on my application. I even copy/paste your JSBin HTML and JS code as is, on an HTML file and it doesn't work on any browser. If I check the Select all checkbox nothing appens.

Leniel Maccaferri Over a year ago

It doesn't work because you need to adapt it to the way ASP.NET generates the control ID; just exactly like you did. I left that part out hoping that you'd understand that and you did manage to get it working. Congrats... :)

Cheshire Cat Over a year ago

Of course, I know. I first tried to took your code from JSBin and copy/paste the HTML and JS on an html file (same control ids) but didn't work... I thought it was due to the ToggleCheckUncheckAllOptionAsNeeded() inside the $(document).ready(function(). Anyway, your solution was right.

illinoistim · Accepted Answer · 2013-01-23 15:58:24Z

0

If you are not using jQuery anywhere else in your page, you can use a very simple javascript to do this. There are many ways to do this, but this works for me and can be attached to buttons, links, etc. checkid is the client id and select being true or 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;
 }
}

answered Jan 23, 2013 at 15:58

illinoistim

44610 silver badges27 bronze badges

1 Comment

Cheshire Cat Over a year ago

I could use this but I'd prefer to know where is the problem with jQuery since I use it on other applications and I use a CDN that I update regularly.

Cheshire Cat · Accepted Answer · 2013-01-24 09:08:44Z

Solved!

Thanks to Leniel Macaferi suggestions I used .on and .prop methods instead of .live and .attr but I make a different implementation of the script that finally works with jQuery v1.9.0 on my application.

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

Collectives™ on Stack Overflow

ASP.NET WebForms Checking all Checkboxes in a GridView using jQuery v1.9.0 doesn't work

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related