Флажок Javascript для изменения фона не работает

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>

Большое вам спасибо за вашу помощь :)

Answer 1

Вы не имеете EventListener или OnClick в вашем коде.

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

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>

Или посмотреть на jsfiddle.net

Читайте: EventTarget.addEventListener() - Web APIs | MDN

Answer 2

Я обновил свою скрипку, чтобы показать рабочую версию функциональности, которую вы ищете.

Your fiddle

Как уже говорили другие в комментариях Проверить функция никогда не вызывается, но, кроме того, что лучше поменять классы на элементы, а не пытаться вручную манипулировать стилями.

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;  
     } 
    } 

С помощью следующих классов CSS:

.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 существующий стиль фона будет иметь приоритет над новыми классами.

Надеюсь, что помощь!