Changing a CheckBox BackColor with no PostBacklike AJAX

Question

NET Intranet Website. With a Site.Master page and .aspx pages the usual asp net webforms. I have these CheckBoxes as you can see in the picture. I am using JavaScript in order to change the background color to green once you click it without having to make a postback, like AJAX.

With My code, it works the only problem, only the box around the check gets affected by my code.Like you can see here.

But lets say I'm adding the property BackColor="Lime" in the aspx page..everything is perfect like so but of course the script doesnt work.

My asp code is:

    <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--%>

And My vb behind code placed in Page Load is:

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

Note that i tried checkbox.style.background, checkbox.style.backgroundColor, checkbox.style.background-color, checkbox.style.BackColor with no success.

Also please note that I also tried to use something like this with no success on my checkbox.

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

Any Help would be greatly appreciated, I've lost all my day on this.. Also the command debugger; within either one of my attempts doesn't ever pop the debug mode.

Answer 1

Try this:

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

or, in your original code instead of setting checkbox.style.background set checkbox.parentElement.style.background.