0

我目前正在使用

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

4 回答 4

1

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

于 2012-04-19T07:42:20.017 回答
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');
});
于 2012-04-19T07:50:49.167 回答
0

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

它应该是这样的

 #id .checked{
background:#ff0000;
}
于 2012-04-19T07:43:12.320 回答
0 
$("ul li").bind('click launch', function () {
    var bool = $(this).attr('checked');
    $(this).toggleClass("checked", bool);
    $('input:checkbox').attr('checked', bool);
}).trigger('launch');
  • 我首先得到布尔值来检查绑定的输入是否为trueor 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');

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

于 2012-04-19T07:56:19.707 回答