切换功能在 jQuery 1.9.1+ 中按预期工作

Question

我正在使用 jQuery 到 select 复选框列表。我正在使用 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/

它在 fiddle 中有效，但在我的网站上无效（按钮消失了）。然后我看到 fiddle 使用的是 1.4.4 版，而我的网站使用的是 2.1.1 版。在玩过 fiddle 之后，我发现只有 jQuery 版本 1.8.3 和更低版本才能使用 select。 1.8.3 和 1.9.2 之间发生了什么变化？我如何修改此代码以使其适用于我的版本？

Answer 1

这里有一个可能的变通方法供您在较新的版本中使用（尽可能保持原始代码的完整性）

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() 来设置选中。

Answer 2

正如我在评论中向您展示的那样，您所指的 jQuery 版本有很多变化。您可以使用 jQuery 迁移插件（由 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 3

你的 toggle(Function, Function) no longer exists 从 jQuery 1.9 向上。

您可以通过使用一个简单的变量来跟踪状态来恢复功能：

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

Answer 4

另一种可能的解决方法：

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

切换功能在 jQuery 1.9.1+ 中按预期工作

toggle function working as expected in jQuery 1.9.1+

html

javascript

jquery