Question

选中复选框后，我一直在使用以下代码更新div样式：

$(document).ready(function() {
    var checkbox = $('input[type="checkbox"]');
    var checkimage = $('<div class="checkbox-image" />');
    $(checkbox).each( function() {
        $(this).show().before( checkimage );
    });
    $(checkbox).prop('checked', function() {
        $('.checkbox-image').addClass('checked');
    });
    $('checkbox-image').on('click',function() {
        $(this).toggleClass('checked').after().prop('checked',$(this).is('.checked'));
    });
});

工作正常，然后停止工作，我无法理解为什么？有人可以帮忙吗？

Answer 1

你遗漏了一个点：

$('.checkbox-image').on('click',function(){
   ^

FIDDLE

Answer 2

jQuery库未包含在小提琴中 - （在LHS面板中，第一个下拉列表选择jQuery版本）

您的checkbox-image选择器错误，因为它错过了前面的.。

此外，代码可以简化为

$(document).ready(function() {

    var checkbox = $('input[type="checkbox"]');
    var checkimage = $('.checkbox-image');

    checkimage.click(function(){
        $(this).toggleClass('checked').next().prop('checked',$(this).is('.checked'));
    }); 

    checkbox.change(function(){
        checkimage.toggleClass('checked', this.checked)
    }).change();

});

演示：Fiddle

检查复选框上选中的属性并应用类

2 个答案: