Question

我有一个带复选框的框，我想在jQuery中插入如果选中复选框，用transition切换框中的类，但它失败了，下面是代码：

$(document).ready(function(){
if ($('.onoffcheck').is(':checked')) {
    $(".panel-success").toggleClass("panel-off2");
  } else {
          $(".panel-off").toggleClass("panel-success");
}
});

JSFIDDLE

Answer 1

首先确保包含jQuery库。然后你必须听取复选框更改事件。否则，条件检查仅在文档就绪时执行。

E.g：

$(document).ready(function(){
    $('.onoffcheck').on('change', function(){
        if ($(this).is(':checked')) {
            $(".panel-success").toggleClass("panel-off2");
        } else {
            $(".panel-off").toggleClass("panel-success");
        }
    });
});

DEMO

Answer 2

您必须添加change侦听器，以便在每次toggle更改时执行checked逻辑。见working example

var toggle = function () {
    if ($('.onoffcheck').is(':checked')) {
        $(".panel-success").toggleClass("panel-off2");
    } else {
        $(".panel-off").toggleClass("panel-success");
    }
};

$(document).ready(function () {
    toggle();  // initial execution
    $('.onoffcheck').on('change', toggle); // execute it on every change
});

Answer 3

尝试

$(document).ready(function () {
    $('.onoffcheck').change(function () {
        $("#node2").toggleClass("panel-off2", this.checked).toggleClass("panel-success", !this.checked);
    }).change()
});

演示：Fiddle

Jquery如果选中切换类

3 个答案: