[英]change background image of a div when checkbox is checked
I hide the default checkbox and use a div with custom checkbox image instead: 我隐藏了默认复选框,并使用具有自定义复选框图像的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>
This does not work at all. 这根本不起作用。 Any suggestions??
有什么建议么?? Much appreciated!
非常感激!
UPDATE: add more lines of code that I think maybe have problems 更新:添加更多我认为可能有问题的代码行
I saw a proper answer already above, but to avoid intruding HTML tags with JS listeners, what considered as not the best practice, I will offer you this solution... 我已经在上面看到了正确的答案,但是为了避免使用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);
Hope it will help you :) 希望它能对您有所帮助:)
You can do it like this: Add an onclick attribute to the checkbox that triggers a toggle function. 您可以这样做:将onclick属性添加到触发切换功能的复选框。 As I cant test it with your code (missing the rest) I can only provide you an enxample where the body background gets changed
由于无法使用您的代码进行测试(其余部分遗漏了),我只能为您提供一个背景变化的示例
<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>
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>
not required javascript.you can do it from css. 不需要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;
}
您可以尝试以下一种方法:
document.getElementById('rememberImage').style.background = 'url(../img/chk_check.png)';
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>
I don't know how your custom checkbox works but, you can add onchange event and check if checkbox is checked then change the background of div. 我不知道您的自定义复选框如何工作,但是,您可以添加onchange事件并检查是否选中了复选框,然后更改div的背景。
Best regards 最好的祝福
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.