Question

我如何检查是否在页面加载中选中了复选框，如果已选中该复选框，则将该类设置为活动状态？

<label class="volume" for="mChatUseSound">click</label>
<input type="checkbox" id="mChatUseSound" />

$('.volume').click(function(){
    $(this).toggleClass('active');
 });

.active{
   background:#FF0000;
}

Answer 1

$(function(){
  if($('#mChatUseSound').is(':checked')){
       $('.volume').toggleClass('active');
  }
});

Answer 2

我猜你可能想要这样的东西 - 将条件传递给toggleClass()并立即触发事件处理程序

$(function(){    
    $('#mChatUseSound').change(function(){
        $('.volume').toggleClass('active',this.checked);
    }).change();
});

FIDDLE

Answer 3

   //toggle can even unset the class    
   //dont use toggle
if($('#mChatUseSound').is(':checked')){
         $(this).addClass('active');
    }

Answer 4

使用.toggleClass()

的switch参数

DEMO

$(function () {
    $('.volume').toggleClass('active', $('#mChatUseSound').is(':checked'));
});

Answer 5

$(document).ready(function() {
    if($('#mChatUseSound').is(':checked')){
        $('.volume').toggleClass('active');
    }
});

jQuery检查是否：加载检查

5 个答案: