動的チェックボックスCSSとブートストラップ

Question

標準のチェックボックスの代わりにカスタムイメージを置き換えようとしていますが、私はたくさんの方法を試しましたが、私はできませんでした。以下はサンプルコードです。

<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> 

：この

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

ようにチェック