jquery forward compatibility issue with checking all checkboxes

Question

I've got a js function using jquery that works fine with 1.8.3.js, but when I update to 1.9.1.js it quits. I really don't know anything about jquery at this point (it's on the list of things to study, coming up soon), so I really can't tell from looking at it where the problem might come in. Here is the code:

<script type="text/javascript">
  var allCheckBoxSelector = '#<%=GridView1.ClientID%> 
         input[id*="chkAll"]:checkbox';
  var checkBoxSelector = '#<%=GridView1.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).live('click', function ()
      {
        $(checkBoxSelector).prop('checked', $(this).is(':checked'));

        ToggleCheckUncheckAllOptionAsNeeded();
      });

      $(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);

      ToggleCheckUncheckAllOptionAsNeeded();
  });
</script>

Any suggestions on what the problem is here? Again, when referencing 1.8.3.js, it works perfectly, but when using 1.9.1.js checking the "check all" box doesn't have any effect.

Anthony Grist · Accepted Answer · 2013-02-22 15:41:22Z

2

The .live() function was deprecated in jQuery 1.7, and then finally removed entirely in jQuery 1.9. Your code no longer works because you're trying to call a function that doesn't exist any more. In place of .live(), use the delegated event syntax for .on(). So change this:

$(allCheckBoxSelector).live('click', function () {
    $(checkBoxSelector).attr('checked', $(this).is(':checked'));
    ToggleCheckUncheckAllOptionAsNeeded();
});

$(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);

to this:

$(document).on('click', allCheckBoxSelector, function () {
    $(checkBoxSelector).prop('checked', $(this).is(':checked'));
    ToggleCheckUncheckAllOptionAsNeeded();
});

$(document).on('click', checkBoxSelector, ToggleCheckUncheckAllOptionAsNeeded);

For additional details about converting .live() to .on(), see the API doc for .live().

answered Feb 22, 2013 at 15:41

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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

1 Comment

Ben Over a year ago

I had just found that elsewhere. When I was googling apparently I was using the wrong keywords and could not find it (same as when I was making this post.) After the post was complete I saw a related post that referenced it, located here: stackoverflow.com/questions/14483514/… Thanks for the quick reply, I'll mark as answer in 6 minutes when I can. :)

jbl · Accepted Answer · 2013-02-22 15:42:05Z

2

.live has been removed in 1.9

try replacing :

$(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);

with

$(document).on('click',checkBoxSelector, ToggleCheckUncheckAllOptionAsNeeded);

answered Feb 22, 2013 at 15:42

jbl

15.5k3 gold badges37 silver badges104 bronze badges

Comments

Brad M · Accepted Answer · 2013-02-22 15:37:53Z

1

Use .prop instead of .attr for checkboxes.

$(checkBoxSelector).prop('checked', $(this).is(':checked'));

answered Feb 22, 2013 at 15:37

Brad M

7,9101 gold badge25 silver badges40 bronze badges

1 Comment

Ben Over a year ago

I made that change, but it had no effect.

Collectives™ on Stack Overflow

jquery forward compatibility issue with checking all checkboxes

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related