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

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

チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実装の原則は、チェックボックスの表示をラベルに置き換え、チェックボックスの表示をnoneに設定し、ラベルタグに表示する画像imgを使用し、js関数を使用して、選択されているかどうかに関係なく画像の切り替えを制御することです。

JavaScriptコードコンテンツをクリップボードにコピー
  1. <label for = "同意" >
  2. <img class = "checkbox" alt = "checked" src = "../img/checked.png" id = "checkimg" onclick = "checkclick();" >
  3. </ラベル>
  4. <input type= "checkbox" style= "display:none" id= "同意する" checked= "チェック済み" >
  5. <スクリプト>
  6.          関数checkclick(){
  7.              var checkimg = document.getElementById( "checkimg" );
  8.              if ($( "#agree" ).is( ':checked' ) ){
  9. $( "#同意する" ).attr( "チェック済み" , "チェックなし" );
  10. checkimg.src = "../img/unchecked.png" ;
  11. checkimg.alt= "チェックなし" ;
  12. }それ以外{
  13. $( "#同意する" ).attr( "チェック済み" , "チェック済み" );
  14. checkimg.src = "../img/checked.png" ;
  15. checkimg.alt= "チェック" ;
  16. }
  17. }
  18. </スクリプト>

以上がHTMLでカスタム画像を使用してチェックボックス表示を実現する方法の内容です。皆様の123WORDPRESS.COMへのご支援をお待ちしております。

<<:  MySQL トランザクション分析

>>:  フレームセットを使用して複雑なページレイアウトを実装するためのテクニックの概要

推薦する

要素のフォームコンポーネントに関する注意事項

要素フォームとコード表示詳細はエレメントフォーム公式サイトをご覧ください構造と機能の分析紹介とソース...

MYSQL メタデータ ロック (MDL ロック) の理論とロック タイプ テスト

目次MYSQL メタデータ ロック (MDL ロック) 学習理論とロック タイプ テスト1. 予備的...

Mysql5.7 で中国語の文字化けの問題を解決する

MySQL 5.7 を使用すると、Web ターミナル経由でデータベースに中国語の文字を書き込むと文字...

Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...

MySQL クエリの重複データ (重複データを削除し、ID が最も小さいデータのみを保持します)

開発の背景:最近、私はバッチ データを MySQL データベースにインポートする機能に取り組んでいま...

userdel コマンドを使用して Linux ユーザーを削除する方法の詳細なチュートリアル

セルデルとは何かuserdel は、ユーザーを削除するための低レベルのツールです。 Debian で...

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...

Dockerカスタムネットワークコンテナ相互接続

目次序文-リンクカスタムネットワーク質問する序文前回は、 -Linkパラメータを使用してコンテナ間の...

MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明

目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...

ウェブデザインとは何か

<br />元の記事: http://www.alistapart.com/articl...

JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明

目次forEach() (ES6) メソッドmap() (ES6) メソッドflatMap() メソ...

mysql mycat ミドルウェアの簡単な紹介

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

Vue プロジェクト コード分割ソリューション

目次背景目的分割前プロセス設計ディレクトリ構造の設計問題分割後プロセス設計ディレクトリ構造の設計問題...

jsはショッピングサイトの虫眼鏡機能を実現します

この記事では、ショッピングサイトの虫眼鏡機能を実現するためのjsの具体的なコードを紹介します。具体的...

Vue の 4 つのカスタム命令の説明と使用例

4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...