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

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

推薦する

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

テキスト ファイルの並べ替えに役立つ Awk コマンドラインまたはスクリプト (推奨)

Awk は、ソートを含む他の一般的なユーティリティによって実行できるいくつかのタスクを実行できる強...

HTMLでのラジオ値の取得、割り当て、登録の詳細な説明

1. ラジオのグループ化名前が同じであれば、それらはグループであり、つまり、次のようにグループ内で選...

Centos7 インストール mysql5.6.29 シェル スクリプト

この記事では、参考までにmysql5.6.29のシェルスクリプトを共有します。具体的な内容は次のとお...

CSS リセットスタイルリセットの実装例

はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのペ...

HTML コードを書くための 30 のヒント

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

マーキー要素は、スクロールするフォントや画像などの効果を実装します。

マーキー要素を使用すると、単純なフォント（画像など）のスライドやその他の効果を実現できます。コードを...

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...

Vueはツリーテーブルを実装する

この記事では、ツリーテーブルを実装するためのVueの具体的なコードを例として紹介します。具体的な内容...

Webフロントエンドの一般的な操作（JS/HTML/CSSなどの知識を含む）

ul liの前のアイコン1をキャンセルしますクリア値1値を1に設定ラベル中央値1をクリアラベルの中央...

Linux で AutoFs マウント サービスをインストールするチュートリアル

Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...

Vueは適切なスライドアウトレイヤーアニメーションを実装します

この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...

Dockerはelasticsearchイメージを起動し、ディレクトリをマウントした後にエラーを解決します

docker hub から es イメージ (バージョン 6.4.2) をダウンロードしました。詳細...

JavaScript を使用した数独の完全な実装プロセス

目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...

Vue の一般的な問題と解決策の概要 (推奨)

Vue に限定されず、他の種類の SPA プロジェクトにも当てはまる問題がいくつかあります。 1....