Javascript複選框來改變背景不工作

我想改變使用複選框的元素的背景位置，但不工作。Javascript複選框來改變背景不工作

下面是代碼：

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>

非常感謝你的幫助:)

來源

2016-12-21 jvelezr

如何調用你的函數？你根本沒有調用函數？ – sinisake

將'onclick =「Check（）」'添加到複選框。 – Barmar

Check（）永遠不會被調用。 – Korgrue

你不必在你的代碼的事件偵聽或的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

來源

2016-12-21 22:30:25

更新了代碼，以便將其嵌入到此帖子中，並且通過背景的預期切換值更正了錯誤。（選中時選中，未選中時清除）。其他代碼在第一次檢查時沒有做任何事情，然後在未選中時檢查它。 –

謝謝soo !!! – jvelezr

我是新來回答問題的，感謝編輯。 –

我已經更新您的提琴以顯示你正在尋找的功能工作版本。

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類重要的現有背景樣式將優先於新類。

我希望有所幫助！

來源

2016-12-21 22:53:13

Javascript複選框來改變背景不工作

回答

相關問題