选中复选框时更改 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

你可以试试这个：

document.getElementById('rememberImage').style.background = 'url(../img/chk_check.png)';

Answer 2

你可以这样做：给触发切换功能的复选框添加一个onclick属性。由于我无法用您的代码对其进行测试（缺少其余代码），因此我只能为您提供一个示例，其中 body 背景发生了变化

<input id="check" type="checkbox" onclick="toggle();"> Click me

<script>

    function toggle() {

        if( document.getElementById("check").checked ) {
                document.getElementsByTagName("body")[0].style.backgroundColor="red";
        }
    }

</script>

Answer 3

div{
    margin: 20px 0;
}
input[type=checkbox] {
    display: none
}
input[type=checkbox]+label {
    background: url(http://s17.postimg.org/phsoii5vf/check.png) no-repeat;
    padding-left: 30px;
    padding-bottom: 5px;
    padding-top: 2.5px;
    height: 18px;
}

input[type=checkbox]:checked+label {
    background: url(http://s2.postimg.org/zbjg138np/check_tick.jpg) no-repeat;    
}

<div>
    <input type="checkbox" id="chk1">
    <label for="chk1">Custom Checkbox1</label>
</div>
<div>
    <input type="checkbox" id="chk2">
    <label for="chk2">Custom Checkbox2</label>
</div>
<div>
    <input type="checkbox" id="chk3">
    <label for="chk3">Custom Checkbox3</label>
</div>
<div>
    <input type="checkbox" id="chk4">
    <label for="chk4">Custom Checkbox4</label>
</div>

不需要 javascript.you 可以从 css 开始。

<div>
<input type="checkbox" id="chk">
<label for="chk">Custom Checkbox1</label>
</div>

input[type=checkbox] {
    display: none
}
input[type=checkbox]+label {
    background: url(../images/check.png) no-repeat;
    padding-left: 30px;
    padding-bottom: 5px;
    padding-top: 2.5px;
    height: 18px;
}

input[type=checkbox]:checked+label {
    background: url(../images/check_tick.png) no-repeat;    
}

Answer 4

我已经在上面看到了一个正确的答案，但是为了避免 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);

希望对您有所帮助:)

Answer 5

function SetBackground(elm){
  if($(elm).is(":checked"))
    {
  $("#rememberImage").css({"background-color":"gray"});
      }
  else
    {
    $("#rememberImage").css({"background-color":"white"});
    }
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rememberImage ftr" id="rememberImage">              
    <input checked="<%=rememberMe%>" name="rememberMe" id="rememberMe" type="checkbox" onchange="SetBackground(this)"/>                        
</div>

我不知道您的自定义复选框是如何工作的，但是，您可以添加 onchange 事件并检查复选框是否被选中，然后更改 div 的背景。

此致

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

change background image of a div when checkbox is checked

javascript

css

liferay