Question

我想在用户选中/取消选中复选框时显示一个按钮。对于不同的用户，该复选框可以显示为已选中或未选中。如何根据复选框的先前状态显示/隐藏按钮。我目前的代码如下。

$('#receive-msg').on('click',function (){
var btnNoMsg = $('#btn-no-msgs');
   btnNoMsg.removeClass('hide').addClass('hide');
   btnNoMsg.removeClass('hide');
});

我知道我必须在某处存储复选框的当前状态，并且再次单击时将先前状态与当前状态进行比较并显示/隐藏按钮。

更新我使用以下代码解决了它。

 var btnNoMsg = $('#btn-no-msgs');
    var state = $(this).prop('checked');
    var receive = $(this).data('receive');
    var status = receive ? true : false;
    if (state === status){
        btnNoMsg.removeClass('hide').addClass('hide');
    }else{
         btnNoMsg.removeClass('hide');
    }

但我将使用beautifulocoder提供的代码。

Answer 1

使用简单的toggleClass：

$('#receive-msg').on('click', function () {
    $('#btn-no-msgs').toggleClass('hide');
});

显示/隐藏按钮基于它以前使用jQuery的状态

1 个答案: