javascript - 选中任何复选框时如何更改 img 类？

Question

在一个 php 文件中，我有这张图片，它的类名是“notselected”。

我在其他 php 文件中有几个复选框。

第二个 php 文件的内容通过 ajax 加载到第一个 php 文件的 div 中。

如果单击/选中加载内容中的任何复选框，我想将图像类更改为“选中”。

我在第一个 php 文件中的代码:

<img id="image" src="empty.png" class="notselected" />

    .notselected {
        width: 340px;         
        height: 91px;   
        background: url(image.png) 0px 0px no-repeat;    
        cursor:not-allowed;
}

.selected {
        width: 340px;         
        height: 91px;   
        background: url(image.png) 0px -91px no-repeat;    
        cursor:pointer;
}

我在第二个 php 文件中的代码:

 foreach ($examples as $example)
{
echo '<input id="select" class="checkbox" type="checkbox" name="example" value="example" />';
}

谁能帮帮我？

Answer 1

您可以使用 jquery 轻松做到这一点，只需将点击事件添加到复选框并切换 select 类

   $(".checkbox").change(function () {
      $("#image").toggleClass("selected");
    }); 

这里是demo