javascript - 更改没有PostBacklike AJAX的CheckBox BackColor

NET Intranet网站。对于Site.Master页面和.aspx页面，通常使用asp net webforms。
您可以在图片中看到这些复选框。我使用JavaScript是为了将背景颜色更改为绿色，一旦您单击它而无需进行回发，例如AJAX。



使用我的代码，它唯一的问题是，只有支票周围的框受我的代码影响，就像您可以在此处看到的那样。



但是可以说我在aspx页面中添加了属性BackColor =“ Lime”。一切都像这样完美，但是脚本当然不起作用。



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

任何帮助将不胜感激，我已经整日迷失了。
也是命令调试器；在我的任何一次尝试中，都不会弹出调试模式。

最佳答案

尝试这个：

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

或者，以原始代码代替设置checkbox.style.background设置checkbox.parentElement.style.background。

关于javascript - 更改没有PostBacklike AJAX的CheckBox BackColor，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19012955/