切换功能按预期在jQuery 1.9.1+中运行

Question

I am using jQuery to select a list of checkboxes. I am using the code as outlined in this fiddle:

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

http://jsfiddle.net/gubhaju/Vj6wY/3/

It was working in the fiddle, but not on my site (the button was disappearing). I then saw that the fiddle was using version 1.4.4, whereas my site was using version 2.1.1. After playing with the fiddle, I found that only with jQuery versions 1.8.3 and lower was the select working. What changed between 1.8.3 and 1.9.2? How can I modify this code so that it works for my version?

Answer 1

As I showed you in my comment, there are quite a few changes in the versions of jQuery that you refer to. You can use the jQuery Migrate plugin (made by the jQuery team) to help troubleshoot the changes, but in a nutshell you can boil your code down to:

 $('.check').click(function () { $('input:checkbox').prop('checked', !$('input:checkbox').prop('checked')); $(this).val(($(this).val() == 'uncheck all') ? 'check all' : 'uncheck all') }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="check" value="check all" /> <input type="checkbox" class="cb-element" />Checkbox 1 <input type="checkbox" class="cb-element" />Checkbox 2 <input type="checkbox" class="cb-element" />Checkbox 3 

Answer 2

Here is a possible work-around for you to use in newer versions (keeping your original code as intact as possible)

JSFiddle

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

Notice you'll also have to use prop() instead of attr() to set checked.

Answer 3

One more possible workaround:

 $('.check:button').click(function () { var toggled = this.value == 'check all'; $('input:checkbox').prop('checked', toggled); this.value = toggled ? 'uncheck all' : 'check all'; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="check" value="check all" /> <input type="checkbox" class="cb-element" />Checkbox 1 <input type="checkbox" class="cb-element" />Checkbox 2 <input type="checkbox" class="cb-element" />Checkbox 3 

Answer 4

Your toggle(Function, Function) no longer exists from jQuery 1.9 upwards.

You can restore functionality by using a simple variable to track the state:

$(document).ready(function(){
var state = 1;
    $('.check:button').click(function(){
        if (state) {
            $('input:checkbox').attr('checked','checked');
            $(this).val('uncheck all')
        } else {
            $('input:checkbox').removeAttr('checked');
            $(this).val('check all');
        }
        state = !state;
    });
});