Question

我目前正在使用

$("ul li").click(function () {
  $(this).toggleClass("checked");
         var $checkbox = $(this).find(':checkbox');
         $checkbox.prop('checked', !$checkbox[0].checked);
});

在复选框上切换一个类。但是，如果我提交表单然后返回浏览器，它会显示我勾选的任何复选框上勾选的框，但他们不再拥有该类。有没有办法扩展上面的内容来检查它是否已经检查过应用该类？

HTML

<ul>
  <li class="noclass">
     <input type="checkbox" name="name" />
  </li>
</ul>

Answer 1

重构函数，以便根据复选框状态切换类。然后触发一次到初始化。

Answer 2

 $(function(){
     $('input:checkbox').each(function() {
         var self = $(this);

        if(self.attr('checked')) {
            self.addClass('checked');
        }
    });
});

$('input:checkbox').live('change', function() {
    $(this).toggleClass('checked');
});

它将解决您的问题：）

这将在父

上应用课程

$(function(){
     $('input:checkbox').each(function() {
         var self = $(this);

        if(self.attr('checked')) {
            self.parent().addClass('checked');
        }
    });
});

$('input:checkbox').live('change', function() {
    $(this).parent().toggleClass('checked');
});

Answer 3

看起来只有在单击复选框时才更改类。检查您是否为已选中的复选框提供了课程。

它应该是这样的

 #id .checked{
background:#ff0000;
}

Answer 4

$("ul li").bind('click launch', function () {
    var bool = $(this).attr('checked');
    $(this).toggleClass("checked", bool);
    $('input:checkbox').attr('checked', bool);
}).trigger('launch');

我先得到布尔值来检查绑定输入是true还是false。
然后我根据是否选中#id来切换课程
然后根据是否检查#id
我将此绑定到一个事件中，该事件在点击时触发，我的编造事件称为“启动”
最后我触发了我的“启动”，因此执行此功能，使其在页面加载时也会发生

修改
我已经制作了另一个版本，你可能正在寻找

$("ul li").bind('click launch', function () { var checkboxes = $(this).find('input:checkbox'); var bool = Boolean(checkboxes.find(':checked').size()); $(this).toggleClass('checked', bool); checkbox.prop('checked', !checkbox[0].checked); }).trigger('launch');

基本上我检查是否选中了任何复选框，然后根据它添加类。我不完全确定你希望其他人做什么，所以我只是复制它。

使用js和后退按钮切换类

4 个答案: