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

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

推薦する

vsftpdで仮想ユーザーログインを設定する方法

yum で vsftpd をインストールします [root@localhost など]# yum -...

MySQL 5.7.18 MSI インストール グラフィック チュートリアル

この記事では、参考までにMySQL 5.7.18 MSIインストールチュートリアルを紹介します。具体...

Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...

CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明

目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...

ウェブデザインにおける円形要素の使用例 25 選

本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...

仮想マシンのディスクサイズを拡張する方法

Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

意外と知らないLinuxのSSHコマンドの使い方7選を徹底解説

システム管理者は複数のサーバーを同時に管理する場合があり、これらのサーバーは異なる場所に配置されてい...

Linux での umask の使用に関する詳細な説明

私は最近 Linux を学び始めました。Ma Ge の umask に関する Linux コースを読...

よくある Linux 英語エラーの中国語翻訳 (初心者必見)

1.コマンドが見つかりません コマンドが見つかりません2. そのようなファイルまたはディレクトリは...

MySQL の Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する思い出させるMySQLコンテナコマンドを...

Linux の高並列性とパフォーマンス最適化の落とし穴の紹介

目次序文Linux アプリケーション実行中に開いているファイルが多すぎる問題の分析と解決Linux ...

MySQLスレーブのメンテナンスに関する経験の共有

序文： MySQL マスター/スレーブ アーキテクチャは、最も一般的に使用されるアーキテクチャ セッ...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...