繁体   English   中英

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

[英]toggle function working as expected in jQuery 1.9.1+

我正在使用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之间有什么变化? 如何修改此代码,使其适用于我的版本?

正如我在评论中向您展示的那样,您引用的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 

这是您可以在较新版本中使用的一种可能的解决方法(保持原始代码尽可能完整)

的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。

另一种可能的解决方法:

 $('.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开始您的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;
    });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM