javascript - 选中复选框时更改 div 的背景图像

Question

我隐藏默认复选框并使用带有自定义复选框图像的 div:

<aui:form>
<c:if
    test="<%=company.isAutoLogin() && !PropsValues.SESSION_DISABLED%>">
    <div class="rememberImage ftr" id="rememberImg">
        <aui:input checked="<%=rememberMe%>" name="rememberMe" id="rememberMe"
                            type="checkbox" cssClass="remember"/>
    </div>
</c:if>
</form>

//omiited

<aui:script use="aui-base">     
        function changeBG() {
            if (this.checked) {
                document.getElementById('rememberImg').style.backgroundImage = 'url(../img/chk_none.png)';
            } else {
                document.getElementById('rememberImg').style.backgroundImage = 'url(../img/chk_check.png)';
            }       
        }

        document.getElementById('_58_rememberMe').addEventListener('change', changeBG);


        var password = A.one('#<portlet:namespace />password');

        if (password) {
            password.on(
                'keypress',
                function(event) {
                    Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
                }
            );
        }
    </aui:script>

这根本行不通。有什么建议么？？非常感谢!

更新:添加更多我认为可能有问题的代码行

Answer 1

我已经在上面看到了一个正确的答案，但是为了避免 JS 监听器侵入 HTML 标记，这被认为不是最佳实践，我将为您提供这个解决方案......

function changeBG() {
    if (this.checked) {
        document.getElementById('myElement').style.backgroundImage = 'url(.....)';
    } else {
        document.getElementById('myElement').style.backgroundImage = 'url(.....)';
    }       
}

document.getElementById('myInput').addEventListener('change', changeBG);

希望对你有帮助:)