HTMLで画像にチェックボックスメソッドを実装する方法

今回はHTMLで画像にチェックボックスメソッドを実装する方法を紹介します。HTMLで画像にチェックボックスメソッドを実装する際の注意点は何ですか？ チェックボックスの使用を実装するために画像を使用する必要がある場合、実装原則は、チェックボックスの表示をラベルテーブルに置き換え、チェックボックスの

表示

をnoneに設定し、使用することです。ラベル label に表示する画像 img 次に、js 関数を使用して画像が選択されるかどうかを制御します。

<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 サイトの他の関連記事に注目してください。

関連書籍:

h5 の sse サーバーを使用して EventSource イベントを送信する方法

H5 のローカル ストレージとローカル データベースの詳細な紹介

H5 ページで APP 関数を呼び出す方法

以上がHTMLで画像にチェックボックスメソッドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。