カスタム画像を使用してHTMLにチェックボックスを表示する方法

以下のエディターは、HTML でカスタム画像を使用してチェックボックスを表示する方法に関する記事を提供します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

チェックボックスの使用を実装するために画像を使用する必要がある場合、実装原則はチェックボックスの表示をラベルテーブルに置き換え、チェックボックスの表示を設定することです。 none に変更し、ラベル label に使用します。 表示する画像 img を指定し、js 関数を使用して画像が選択されるかどうかを制御します。

JavaScriptコードコンテンツをクリップボードにコピーします

<label  for="agree" >              
        <img  class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();">   
     </label>      
     <input type="checkbox"  style="display:none" id="agree" checked="checked">   
     <script>   
         function checkclick(){   
            var checkimg = document.getElementById("checkimg");   
            if($("#agree").is(&#39;:checked&#39;) ){   
                $("#agree").attr("checked","unchecked");   
                checkimg.src="../img/unchecked.png";   
                checkimg.alt="未选";   
            } else{   
                $("#agree").attr("checked","checked");   
                checkimg.src="../img/checked.png";   
                checkimg.alt="选中";   
            }   
        }   
    </script>

上記は、エディターが提供するPHPでカスタム画像を使用してチェックボックスを表示する完全な方法です。中国語の Web サイト~

カスタム画像を使用して Html でチェックボックスを表示する方法に関するその他の関連記事については、PHP の中国語 Web サイトに注目してください。