背景を変更する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のを持っていません。 jsfiddle.net

上

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>

またはビューまで読む：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クラス上の重要な既存の背景スタイルは、新しいクラスよりも優先されます。

私はその助けを願っています！