Изменение цвета фона флажка без AJAX, похожего на PostBack

NET Интранет-сайт. Со страницей Site.Master и страницами .aspx обычные веб-формы asp net. У меня есть эти CheckBoxes, как вы можете видеть на картинке. Я использую JavaScript, чтобы изменить цвет фона на зеленый, как только вы щелкнете по нему, без необходимости выполнять обратную передачу, например AJAX.

введите здесь описание изображения

С моим кодом он работает, единственная проблема, мой код влияет только на поле вокруг галочки. Как вы можете видеть здесь.

введите здесь описание изображения

Но скажем, я добавляю свойство BackColor="Lime" на страницу aspx. Все в порядке, но, конечно, скрипт не работает.

введите здесь описание изображения

Мой asp-код:

    <asp:Table CssClass="GroupKPI" runat="server" GridLines="Horizontal">
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">
                    <%-- Critère de recherche WP--%>
                    <asp:CheckBox ID="labelList_WP" runat="server" Text="WP" CssClass="labelTitle" AutoPostBack="False" BackColor="Lime" />
                    <asp:Panel ID="Panel1" runat="server" CssClass="Panel">
                        <asp:CheckBoxList ID="List_WP" runat="server" CssClass="CBList">
                        </asp:CheckBoxList>
                    </asp:Panel>
                </asp:TableCell>
                <asp:TableCell ID="TableCell13" runat="server" CssClass="CellSeparator" Width="5px"></asp:TableCell>
                <asp:TableCell ID="TableCell5" runat="server">
                    <%-- Critère de recherche WP CF--%>
                    <asp:CheckBox ID="labelList_WP_CF" runat="server" Text="WP CF" CssClass="labelTitle"
                        OnCheckedChanged="Check_Clicked" AutoPostBack="False" />
                    <asp:Panel ID="Panel2" runat="server" CssClass="Panel">
                        <asp:CheckBoxList ID="List_WP_CF" runat="server" CssClass="CBList">
                        </asp:CheckBoxList>
                    </asp:Panel>
                </asp:TableCell>
                <asp:TableCell ID="TableCell14" runat="server" CssClass="CellSeparator" Width="5px"></asp:TableCell>
                <asp:TableCell ID="TableCell6" runat="server">
                    <%-- Critère de recherche SUBWP--%>
                    <asp:CheckBox ID="labelList_SUBWP" runat="server" Text="SUBWP" CssClass="labelTitle"
                        OnCheckedChanged="Check_Clicked" AutoPostBack="False" />
                    <asp:Panel ID="Panel3" runat="server" CssClass="Panel">
                        <asp:CheckBoxList ID="List_SUBWP" runat="server" CssClass="CBList">
                        </asp:CheckBoxList>
                    </asp:Panel>
                </asp:TableCell>
                <asp:TableCell ID="TableCell15" runat="server" CssClass="CellSeparator" Width="5px"></asp:TableCell>
                <asp:TableCell ID="TableCell7" runat="server">
                    <%-- Critère de recherche WP REGROUPEMENT--%>
                    <asp:CheckBox ID="labelList_WP_REGROU" runat="server" Text="WP REGROU" CssClass="labelTitle"
                        OnCheckedChanged="Check_Clicked" AutoPostBack="False" />
                    <asp:Panel ID="Panel4" runat="server" CssClass="Panel">
                        <asp:CheckBoxList ID="List_WP_REGROU" runat="server" CssClass="CBList">
                        </asp:CheckBoxList>
                    </asp:Panel>
                </asp:TableCell>
                <asp:TableCell ID="TableCell16" runat="server" CssClass="CellSeparator" Width="5px"></asp:TableCell>
                <asp:TableCell ID="TableCell8" runat="server">
                    <%-- Critère de recherche ORGANISATION--%>
                    <asp:CheckBox ID="labelList_ORGANISATION" runat="server" Text="Organisation" CssClass="labelTitle"
                        OnCheckedChanged="Check_Clicked" AutoPostBack="False" />
                    <asp:Panel ID="Panel5" runat="server" CssClass="Panel">
                        <asp:CheckBoxList ID="List_ORGANISATION" runat="server" CssClass="CBList">
                        </asp:CheckBoxList>
                    </asp:Panel>
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
        <%-- Fin de la table KPI RANGÉ 1--%>

И мой vb за кодом, помещенным в загрузку страницы:

     labelList_WP.Attributes.Add("onclick", "var checkbox=document.getElementById('" & Me.labelList_WP.ClientID & "'); if (checkbox.checked) {checkbox.style.background = '#9ACD32'; } else {checkbox.style.background = '#F3F6FA';}  ")

Обратите внимание, что я безуспешно пробовал checkbox.style.background, checkbox.style.backgroundColor, checkbox.style.background-color, checkbox.style.BackColor.

Также обратите внимание, что я также пытался использовать что-то подобное, но безуспешно.

    labelList_WP.Attributes.Add("onlick", "if ($(""#labelList_WP"").hasClass(""labelTitleChecked"")==true) { $(""#labelList_WP"").removeClass(""labelTitleChecked""); }  else {$(""#labelList_WP"").addClass(""labelTitleChecked"");}")

Любая помощь будет принята с благодарностью, я потерял на этом весь день. Также отладчик команд; ни в одной из моих попыток не появляется режим отладки.


person Lethal420    schedule 25.09.2013    source источник
comment
Просто чтобы подтвердить, когда флажок установлен, вы хотите, чтобы весь его родитель стал зеленым?   -  person Yuriy Galanter    schedule 26.09.2013


Ответы (1)


Попробуй это:

labelList_WP.Attributes.Add("onclick", "$(""#labelList_WP"").parent().toggleClass(""labelTitleChecked"");")

или в исходном коде вместо установки checkbox.style.background установить checkbox.parentElement.style.background.

person Yuriy Galanter    schedule 25.09.2013
comment
Это сработало, checkbox.parentElement.style.background - person Lethal420; 26.09.2013
comment
Огромное спасибо - person Lethal420; 26.09.2013