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 トランザクション分析

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

推薦する

Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します

Vue3プロジェクトのカプセル化サイドナビゲーションテキストスケルトン効果コンポーネント-グローバル...

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...

フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

1. はじめにページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異...

MySQLで数千万のテストデータを素早く作成する方法

述べる：この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...

Alibaba Cloud Server Tomcatにアクセスできません

目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...

opensslを使用して無料の証明書を生成する方法

1: openssl とは何ですか? その機能は何ですか?適用シナリオは何ですか? Baidu 百科...

select @@session.tx_read_only が DB に大量に出現するのはなぜですか?

問題を見つける上位の SQL ステートメントを取得すると、DB が大量のselect @@sessi...

nginxプロキシsocket.ioサービスの落とし穴の詳細な説明

目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...

Centos サーバーに MySql をデプロイし、Navicat に接続するプロセスの詳細な説明

（１）サーバー構成： [root@localhost ~]# cd /usr/local/src/ ...

基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)

相対パス - ファイルを参照する Web ページの場所に基づいて確立されたディレクトリ パス。そのた...

HTML tbody の使用

構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....

CSS3 で実装された価格表

結果： 実装コードhtml <div id="価格表" class=&qu...

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...