切換功能按預期在jQuery 1.9.1+中運行

Question

我正在使用jQuery選擇復選框列表。 我正在使用此小提琴中概述的代碼：

$(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/

它正在擺弄，但在我的網站上卻沒有（按鈕消失了）。 然后，我看到小提琴使用的是1.4.4版，而我的網站使用的是2.1.1版。 在玩弄小提琴之后，我發現只有使用jQuery 1.8.3及更低版本的jQuery才有效。 1.8.3和1.9.2之間有什么變化？ 如何修改此代碼，使其適用於我的版本？

Answer 1

正如我在評論中向您展示的那樣，您引用的jQuery版本有很多更改。 您可以使用jQuery Migrate插件（由jQuery團隊制作）來幫助解決更改問題，但總而言之，您可以將代碼簡化為：

 $('.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

這是您可以在較新版本中使用的一種可能的解決方法（保持原始代碼盡可能完整）

的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');        
        }
    })
})

注意，您還必須使用prop()而不是attr()來設置checked。

Answer 3

另一種可能的解決方法：

 $('.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

從jQuery 1.9開始，您的toggle（Function，Function）不再存在 。

您可以通過使用簡單的變量來跟蹤狀態來恢復功能：

$(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;
    });
});