使用 js 和后退按钮切换类答案

【问题标题】：Toggle class using js and the back button使用 js 和后退按钮切换类
【发布时间】：2012-04-19 16:36:57
【问题描述】：

我正在使用

$("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>

【问题讨论】：

我并不完全确定这个脚本应该做什么，真的。检查我的任何解决方案是否在正确的轨道上。

标签： javascript jquery input checkbox

【解决方案1】：

 $(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');
});

【讨论】：

这非常接近，我应该显示我的 HTML（在上面添加）。如果我将input:checkbox 切换到ul li，这适用于input:checkbox，但不适用于li 元素，虽然非常接近。我需要将类应用于复选框容器。

【解决方案2】：

重构函数，使其根据复选框状态切换类。然后触发一次即可初始化。

【讨论】：

【解决方案3】：

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

应该是这样的

 #id .checked{
background:#ff0000;
}

【讨论】：

【解决方案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');

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

【讨论】：

我实际上需要将类应用到它的容器，li，我在上面添加了 HTML。
这些示例将class="checked" 应用于<li>。