Javascript 使用CSS单击图像时显示文本

我有一个食物菜单网站，每个食物条目都有图片。它们实际上是被标记为图像的复选框。当我点击任何菜单图像时，它会显示一个我用CSS编码的自定义复选框

除此之外，我想有文本显示在我的页面上进一步向下，基本上指定哪些食品项目已检查。因此，如果我选择corn，我希望“corn”一词显示在html页面的另一个部分中

此外，如果取消选中该项，则文本应隐藏

我更愿意单独使用CSS来实现这一点，但如果不是，我可以使用一些javascript

这是我的。谢谢你的帮助。谢谢

HTML代码

<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
<label for="checkbox2" class="css-label"><img src="images\cucumber.png"></label>

<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
<label for="checkbox3" class="css-label"><img src="images\chickpea.png"></label>

<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
<label for="checkbox4" class="css-label"><img src="images\corn.png"></label>

input[type=checkbox].css-checkbox {
                        position:absolute; z-index:-1000; left:-1000px; overflow:        hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
                    }

                    input[type=checkbox].css-checkbox + label.css-label {
                        padding-left:40px;
                        height:45px; 
                        display:inline-block;
                        line-height:45px;
                        background-repeat:no-repeat;
                        background-position: 0 0;
                        font-size:5px;
                        vertical-align:middle;
                        cursor:pointer;
                        margin-bottom:165px

                    }

                    input[type=checkbox].css-checkbox:checked + label.css-label {
                        background-position: 0 -45px;
                    }
                    label.css-label {
            background-image:url(http://localhost/images/csscheckbox_7cdb0340e1b30df1c5ec1b06aac0dca1.png);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

---

CSS中没有onClick这样的函数，您可以使用：hover或：active标记。（：active是您可以获得的最接近的值）

---

您还可以使用图像标记内部的onClick=“”属性来切换某些javascript函数。

您必须使用javascript来实现此功能。CSS不处理逻辑，只处理表示，记住点击了哪些图像完全符合逻辑。是的，这绝对是Javascript的事情。现在，如果您在复选框后面有一个

div

，并将其隐藏到选中状态，这将在CSS中起作用：

input[type=checkbox]：checked+。myDiv{visibility:visible；}

在CSS中执行此操作将非常难以维护。这在JQuery中很简单。好的，我理解你所说的CSS不是一个现实的选项。在我的特定情况下，有人能提供一些代码来帮助javascript或jquery实现这一点吗？非常感谢