选中任何复选框时如何更改 img 类？答案

【问题标题】：how to change img class when any checkbox is selected?选中任何复选框时如何更改 img 类？
【发布时间】：2014-01-16 13:32:25
【问题描述】：

在一个 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" />';
}

谁能帮帮我？

【问题讨论】：

这应该发生在哪里，客户端（显示 HTML）还是服务器端？
客户端，目前只是页面布局
对。如果它是客户端，为什么我们要查看 PHP，而 而不是 HTML（这是客户端看到的）？
嗯...我们做到了 :) 我为您保存了大量的 php 代码并仅粘贴了“echo”。当然应该只考虑html。

标签： javascript php css class checkbox

【解决方案1】：

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

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

这里是demo

【讨论】：

+1 但是要添加，最好使用“更改”而不是点击。
这仅适用于第一个复选框元素...我有更多（foreach）它们中的任何一个都应该触发 img 类更改jsfiddle.net/54Dzr
这个“.checkbox”现在将在每次点击时在未选中和选中之间切换，这不是我想要实现的。如果选择了任何一个，我需要它被“选中”，如果没有一个被选中，我需要它“未选中”

【解决方案2】：

实际上这是可行的：

    $(document).ready(function() 
{
    var rejestruj=0;    

    $(".checkbox").each(function(i, obj) {
        $(obj).change(function()
        {
            if ( $(obj).attr('checked') == true)
            {
                rejestruj++;
                $("#image").addClass("selected");
            }
            else
            {
                rejestruj--;
                if (!rejestruj) $("#image").removeClass("selected");
            }
        });
    });
});

谢谢！

【讨论】：