html - 动态复选框 CSS 和 Bootstrap

Question

我正在尝试替换自定义图像而不是标准复选框，我尝试了很多方法但我做不到，我已经使用了 :checked。下面是示例代码。

<label class="checkbox-inline">
    <img src="assets/settings.png" alt="" width="70px;"/>
     <input type="checkbox" id="inlineCheckbox3" value="option3" id="cjecg"> &nbsp;
</label>

我有 4 个这样的复选框，我希望将它们替换为选中的其他图像。

Answer 1

在此处查看演示:https://jsfiddle.net/IA7medd/s5L02bck/

HTML:

<p class="checkbox-inline">
  <input type="checkbox" class="inlineCheckbox" value="option3" id="cb1">
  <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_settings_48px-128.png" alt="" width="70px;"/>
  <label for="cb1"> Option 1 </label>
</p>

你将像这样使用 :checked

.inlineCheckbox:checked{
  display:none;
}
.inlineCheckbox:checked + img{
  display:inline-block;
}