배경을 변경하는 자바 스크립트 체크 박스가 작동하지 않습니다.

Question

확인란을 사용하여 요소의 배경 위치를 변경하려하지만 작동하지 않습니다.

x = false; 
 

 
function Check() { 
 
    if (x) { 
 
    document.getElementById("checkboz").style.backgroundPosition = '0 0'; 
 
    document.getElementById("checkboz").style.backgroundPosition = '-28px 0'; 
 
    x = false; 
 
    } else { 
 
    document.getElementById("checkboz").style.backgroundPosition = 'none'; 
 
    document.getElementById("checkboz").style.backgroundPosition = '0 0'; 
 
    x = true; 
 
    } 
 

 
}

#checkboz { 
 
    background: url(http://movimientomore.com/images/2016/12/21/sprite-check-01.png); 
 
    background-size: 55px; 
 
    background-repeat: no-repeat; 
 
    width: 28px; 
 
    height: 28px; 
 
}

<div id="checkboz" class="checkbox"> 
 
    <label for="modlgn-remember"> 
 
    <input id="modlgn-remember" name="remember" class="inputbox" value="yes" type="checkbox">Recordarme</label> 
 
</div>

당신은 당신의 코드에서의 EventListener 또는 온 클릭이없는 당신의 도움 :)

Answer 1

주셔서 너무 감사합니다 여기에

는 코드입니다. jsfiddle.net

에

또는보기

x=false; 
 
function Check(){ 
 
    x=!x; 
 
    if(x){  
 
    document.getElementById("checkboz").style.backgroundPosition='0 0'; 
 
    document.getElementById("checkboz").style.backgroundPosition='-28px 0'; 
 
    } 
 
    else{ 
 
    document.getElementById("checkboz").style.backgroundPosition='none'; 
 
    document.getElementById("checkboz").style.backgroundPosition='0 0'; 
 
    } 
 

 

 
} 
 
document.getElementById("checkboz").addEventListener("click", Check);

#checkboz{ 
 
    background: url(http://movimientomore.com/images/2016/12/21/sprite-check-01.png); 
 
    background-size: 55px; 
 
    background-repeat: no-repeat; 
 
    width: 28px; 
 
    height: 28px; 
 
}

<div id="checkboz" class="checkbox"> 
 
    <label for="modlgn-remember"><input id="modlgn-remember" name="remember" class="inputbox" value="yes" type="checkbox">Recordarme</label> 
 
</div>

document.getElementById("checkboz").addEventListener("click", Check); 

최대 읽기 : 난 당신이 찾고있는 기능의 작동 버전을 표시하기 위해 귀하의 바이올린을 업데이트 한 EventTarget.addEventListener() - Web APIs | MDN

Answer 2

. 다른 사람이 의견에 말한 것처럼

Your fiddle

는 확인 함수가 호출되고 있지 않았다, 그러나 또한, 대신 수동으로 스타일을 조작하는 시도의 요소에 클래스를 교체하는 것이 좋습니다. 다음 CSS 클래스와

var element = document.getElementById('modlgn-remember'); 
    element.addEventListener('click', function(e) { 
     console.log(element.checked) 
     Check(element.checked); 
    }, false); 
    x=false; 
    function Check(checked){ 
     console.log(x); 
     var $el = document.getElementById("checkboz") 
     if(checked){ 
     $el.className = $el.className.replace(' remove-background- position-1 remove-background-position-2', ''); 
     $el.className += ' add-background-position-1 add-background-position-2'; 
     x=false; 
     } else { 
     var cn = $el.className; 
     cn = $el.className.replace(' add-background-position-1 add-background-position-2', ''); 
     $el.className = cn; 
     $el.className += ' remove-background-position-1 remove-background-position-2'; 
     x=true;  
     } 
    } 

! 포함하지 않는

.add-background-position-1 { 
     background-position: 0 0 !important; 
    } 

    .add-background-position-2 { 
     background-position: -28px 0 !important; 
    } 
    .remove-background-position-1 { 
     background-position: inherit !important; 
    } 
    .remove-background-position-2 { 
     background-position: 0 0 !important; 
    } 

하는 CSS 클래스에 대한 중요한 기존의 배경 스타일은 새로운 클래스보다 우선합니다.

나는 그 도움이되기를 바랍니다!