Добавить CSS класс с JavaScript

Question

У меня есть следующий код, который делает флажки немного более изящными, добавляя спрайт изображения в флажок.

Javascript:

$(document).ready(function() {

    /* see if anything is previously checked and reflect that in the view*/
    $(".checklist input:checked").parent().addClass("selected");

    /* handle the user selections */
    $(".checklist .checkbox-select").click(
        function(event) {
            event.preventDefault();
            $(this).parent().addClass("selected");
            $(this).parent().find(":checkbox").attr("checked", "checked");
        }
    );

    $(".checklist .checkbox-deselect").click(
        function(event) {
            event.preventDefault();
            $(this).parent().removeClass("selected");
            $(this).parent().find(":checkbox").removeAttr("checked");
        }
    );
});

CSS:

.checklist
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.checklist li
{
    float: left;
    margin-right: 10px;
    background: url(resources/i/checkboxbg.gif) no-repeat 0 0;
    width: 105px;
    height: 150px;
    position: relative;
    font: normal 11px/1.3 "Lucida Grande" , "Lucida" , "Arial" ,Sans-serif;
}
.checklist li.selected
{
    background-position: -105px 0;
}
.checklist li.selected .checkbox-select
{
    display: none;
}
.checkbox-select
{
    display: block;
    float: left;
    position: absolute;
    top: 118px;
    left: 10px;
    width: 85px;
    height: 23px;
    background: url(resources/i/select.gif) no-repeat 0 0;
    text-indent: -9999px;
}
.checklist li input
{
    display: block;
}
a.checkbox-deselect
{
    display: none;
    color: white;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    top: 120px;
    right: 10px;
}
.checklist li.selected a.checkbox-deselect
{
    display: block;
}
.checklist li label
{
    display: block;
    text-align: center;
    padding: 8px;
}

Markup:

<ul class="checklist">  
    <li>
        <asp:CheckBox ID="CheckBox1"  Text="<img src='' />Option" runat="server" />
        <a class="checkbox-select" href="#">Select</a> 
        <a class="checkbox-deselect" href="#">Cancel</a>
    </li>
</ul>

Когда флажок установлен, class="selected" добавляется к <li>. Беда в том, что если пользователь нажимает кнопку «Назад», флажки по-прежнему установлены (страница кэшируется), но CSS не применяется повторно. Я всегда мог добавить элемент управления кэшем, чтобы браузер каждый раз загружал свежую копию страницы, чтобы флажки не устанавливались, но я бы предпочел повторно применить класс к элементу списка.

Каждый <ul class="checklist"> обернут в панель asp.net, которая отображается как div с идентификатором ct100_ContentPlaceHolder1_Panel1 - как бы я перебрал каждый флажок на этой панели и повторно подключил класс css, если флажок установлен?

Заранее спасибо!

Answer 1

Вы можете сделать это при загрузке, используя : проверено селектором :

$('.checklist :checked').parent().addClass('selected');