Javascript checkbox pour changer d'arrière-plan ne fonctionne pas

Question

J'essaie de changer la position d'arrière-plan d'un élément en utilisant une case à cocher, mais ne fonctionne pas.

Voici le code:

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>

Merci beaucoup pour votre aide :)

Answer 1

Vous ne disposez pas d'un EventListener ou onclick dans votre code.

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>

Ou vue sur jsfiddle.net

Lisez: EventTarget.addEventListener() - Web APIs | MDN

Answer 2

J'ai mis à jour votre violon pour montrer une version de travail de la fonctionnalité que vous recherchez.

Your fiddle

Comme d'autres l'ont dit dans les commentaires, la fonction de vérification n'a jamais été appelé, mais en plus, il est préférable d'échanger des cours sur les éléments plutôt que d'essayer de manipuler manuellement les styles.

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

Avec les classes CSS suivantes:

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

sans importance sur les classes css le style d'arrière-plan existant a priorité sur les nouvelles classes.

J'espère que cette aide!