我正在嘗試為可點(diǎn)擊的圖像制作一個(gè) HTML 表單復(fù)選框，該圖像在初始化時(shí)是一個(gè)圖像，在單擊時(shí)是另一個(gè)圖像。它還應(yīng)該能夠在其上存儲(chǔ)一兩個(gè)變量（因?yàn)槲倚枰褂眯泻土凶兞可伤鼈儯┎⑹褂锰峤话粹o。如果這是一個(gè)非常簡(jiǎn)單的問(wèn)題，我也很抱歉，我通常只在需要時(shí)使用 C# 和一點(diǎn) PHP，但這次我被迫使用 html 和 CSS，而我從來(lái)不擅長(zhǎng)這些。
1 回答
一只甜甜圈
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊
這是一個(gè)簡(jiǎn)單的入門(mén)指南，您可以將其包裝在一個(gè)表單中：
.checkbox-toggle {
display: none;
}
.checkbox-toggle + img {
display: inline-block;
}
.checkbox-toggle + img + img {
display: none;
}
.checkbox-toggle:checked + img {
display: none;
}
.checkbox-toggle:checked + img + img {
display: inline-block;
}
<label>
<input class="checkbox-toggle" type="checkbox" name="img[0][0]" />
<img src="https://picsum.photos/id/1/100" />
<img src="https://picsum.photos/id/2/100" />
</label>
<label>
<input class="checkbox-toggle" type="checkbox" name="img[0][1]" />
<img src="https://picsum.photos/id/3/100" />
<img src="https://picsum.photos/id/4/100" />
</label>
- 1 回答
- 0 關(guān)注
- 210 瀏覽
添加回答
舉報(bào)
0/150
提交
取消