0

Fiddle http://jsfiddle.net/hdD8B/

I'm having trouble replacing this code that worked in jQuery 1.7.

I have a button that simply checks all the checkboxes when clicked and then unchecks them when clicked again.

    $('.check:button').toggle(
        function () {
        $('input:checkbox').attr('checked', 'checked');
        $(this).val('uncheck all');
    }, function () {
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');
    });

this is the closest I have been able to get it works to check and uncheck all once then doesn't work anymore. It also seems kind of ugly to have to a simple method replaced with a more complicated on.

(function ($) {
    $.fn.clickToggle = function (func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function () {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

/*global $, jQuery,document,fnCreateSelect*/
$(document).ready(function () {





    $('.check:button').clickToggle(
        function () {
        $('input:checkbox').attr('checked', 'checked');
        $(this).val('uncheck all');
    }, function () {
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');
    });
Ronald McDonald
  • 2,843
  • 11
  • 49
  • 67

1 Answers1

1

As you may have read, .toggle() was removed after jQuery 1.8 -

Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed. http://api.jquery.com/toggle-event/

Here is one way to fix the issue - 

$('.check:button').click(function () {
    if('check all' == $(this).val() ) {
        $('input:checkbox').prop('checked', true);
        $(this).val('uncheck all');
    } else {
        $('input:checkbox').prop('checked', false);
        $(this).val('check all');
    }
});

You'll notice that I switched to prop() instead of attr() as prop() is considered en vogue for elements like this. There has been much debate on "best practices" though but this post makes good reading - .prop() vs .attr()

Community
  • 1
  • 1
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • You're correct, but I was just responding to the OP's toggle issue. – Jay Blanchard May 07 '14 at 20:28
  • I like the shorter code, but still have the same issue, It works once only. – Ronald McDonald May 07 '14 at 20:29
  • Only once? Can you share the markup or setup a fiddle? – Jay Blanchard May 07 '14 at 20:30
  • @JayBlanchard I understand, but it's always good to spread best practices ;) – zgood May 07 '14 at 20:31
  • 1
    *"You're correct, but I was just responding to the OP's toggle issue."* that's the thing, the toggle issue isn't what was causing the problem. :) – Kevin B May 07 '14 at 20:51
  • @GustaveMoreau Read the api. it specifically states not to use removeProp for this purpose. use the method jay used in his answer instead. – Kevin B May 07 '14 at 20:52
  • I have updated the fiddle and got rid of removeProp() because, as the docs say, "Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element." http://jsfiddle.net/jayblanchard/hdD8B/3/ this code checks and unchecks as many times as I want to click. – Jay Blanchard May 07 '14 at 20:53
  • 1
    Oh snap @KevinB! LOL - I just now saw the removeAttr() and it causes the same problem as the removeProp() does. :D – Jay Blanchard May 07 '14 at 20:56
  • Just the prop change alone would have been enough to fix his problem, he can continue to use clickToggle if he wishes – Kevin B May 07 '14 at 20:58
  • I see that now - he must not be using a jQuery version later than 1.8. I automatically went to "deprecated" in my head and skipped right over the "it only works once" thing. Too much haste! – Jay Blanchard May 07 '14 at 21:01