變化的背景圖像時復​​選框被選中

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

我看到了一個正確的答案已經超過，但要避免入侵的HTML標籤與JS的聽衆，有什麼被視爲不是最好的做法，我將爲你提供這種解決方案

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 2

你可以試試這個：

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

Answer 3

你可以這樣說：一個onclick屬性添加到複選框觸發一個切換功能。正如我不能與你的代碼測試（缺少休息）我只能爲你提供在身體背景得到改變

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

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能做到這一點的enxample來自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 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的背景。

祝你好運