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 curdate() 関数の詳細な例

MySQL CURDATE関数の紹介文字列コンテキストまたは数値コンテキストの YYYMMDD 形式...

フォームの「Enter」、「Submit」、「Enter != Submit」を削除する方法

「Enter != Submit」問題を実装するには、通常、「ボタンの種類」と「入力ボックスの数」か...

ネイティブ JavaScript メッセージボード

この記事では、参考までにメッセージボードを実装するためのJavaScriptの具体的なコードを紹介し...

Linux で独自の Nexus プライベート サーバーを構築する方法

この記事では、Linuxサーバー上でDockerを使用してNexusプライベートサーバーを構築する方...

JavaScript の for/of、for/in の詳細な紹介

目次JavaScriptでは、 forループを記述する一般的な方法がいくつかあります。最初の、そして...

CSS スティッキーフッターのいくつかの実装

「スティッキーフッター」とはいわゆる「スティッキー フッター」は、新しいフロントエンドの概念や技術で...

CentOS7にMySQL 8.0.26をインストールする手順

1. まず、お使いのマシンに応じて、MySQL 公式サイトから対応するデータベースをダウンロードしま...

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...

データページング効果を実現する js オブジェクト

この記事の例では、データのページング効果を実現するためのjsオブジェクトの具体的なコードを参考までに...

CentOS7.6 システムで yum を使用して lnmp 環境を構成する方法

1. インストールバージョンの詳細 サーバー: MariaDB サーバーバージョン: 5.5.60-...

Vue は Websocket カスタマー サービス チャット機能を実装します

この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...

CSSはクーポンスタイルを実装するために放射状グラデーションを使用します

この記事では、CSS で放射状グラデーションを使用して、次の図に示すクーポン スタイルの効果を実現す...

WEB2.0の片手ルール

<br />前回のCSSに関する記事は、多くの人にあまり理解されませんでした。そのため、...

光るテキストとちょっとしたJS特殊効果を実現するCSS

実装のアイデア: CSSでtext-shadowを使用してテキストの光る効果を実現します効果画像: ...

nginxのアップストリーム設定と機能の詳細な説明

設定例 アップストリームバックエンド{ サーバー backend1.example.com 重み=5...