如何使用 CSS 和 JavaScript 更改標簽的背景圖像

Question

這是一個真正令人頭疼的問題。 我在一個表單中有三個復選框，我有標簽，並且標簽有使用 CSS 設置的背景圖像，問題是，我如何讓 JavaScript 在單擊時將圖像從當前圖像更改為第二張圖像？選擇復選框。 根據我對 javascript 的了解，它應該可以工作，有什么想法嗎？ 此外，由於之前 ie 7 和 8 的問題，它確實必須這樣。

HTML

<input type="checkbox" name="interest1" id="interest1" value="interested"style="display:block">
<input type="checkbox" name="interest2" id="interest2" value="interested"style="display:block">
<input type="checkbox" name="interest3" id="interest3" value="interested"style="display:block">
<p align="center">
<label for="interest_inet" id="label-interest1" onClick="func()"></label>

CSS：

label {
    border:1px solid red;
    display:inline-block;
}

#label-interest1 {
    background-image: url(images/internetbutton.gif);
    width: 152px;
    height:152px;
}

JavaScript：

<script type="text/javascript">
function func()
{
    if(document.getElementById('interest_inet').checked)
    {
        document.getElementById('label-interest1').style.backgroundImage=url(images/internetbutton.gif);
    }
    else
    {
        document.getElementById('label-interest1').style.backgroundImage=url(internetbuttonchecked.gif);
    }
}
</script>

這是一個實時代碼示例

Answer 1

您似乎只是缺少一些引號（ style.backgroundImage的值應該是一個字符串）：

function func()
{
    var label = document.getElementById('label-interest1');
    if(document.getElementById('interest_inet').checked)
    {
        label.style.backgroundImage = 'url(images/internetbutton.gif)';
    }
    else
    {
        label.style.backgroundImage = 'url(internetbuttonchecked.gif)';
    }
}