Question

我希望复选框字段在其标签上添加活动类（如果已选中）。我做了所有事情，比如检查它是否将类添加到标签中，如果没有选中则不会添加活动类。

但我的观点是代码是

<label class="define--area--label"><input type="checkbox" checked ><label>

然后它不会将活动类添加到标签。

这是我的代码

 $('.define--area--label > input').change(function() {
        if ($(this).is(':checked')) {
            $(this).parent().addClass('active');
        } else {
            $(this).parent().removeClass('active');
        }

    });

Full Example

Answer 1

我认为你必须在加载文档后通过JavaScript触发更改事件。

$(document).ready(function(){
   $('.define--area--label > input').change(function() {
        if ($(this).is(':checked')) {
            $(this).parent().addClass('active');
        } else {
            $(this).parent().removeClass('active');
        }

    });
   $('.define--area--label > input:checked').trigger('change');
})

Answer 2

$(document).ready(function(){    
    $('.define--area--label > input').each(function() {
        if($(this).is(':checked')){
            $(this).parent().addClass('active');
        }
    });
});

无需任何点击或按任意键添加活动类（复选框）

2 个答案: