あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。
|
今日ふと、HTML でチェックボックスのスタイルを変更できる範囲が限られていることと、チェックボックスを作るのに現在多くのコードが必要であることに気付いたので、簡単に実装する方法を考えてみました。これが実現可能であることは十分に証明されています。これ以上長々と説明せずに、参考までにソースコードを投稿します。 結果： 選択されていない場合:  選択すると: 画像の背景:  チェックボックス選択.jpg チェックボックスNoSel.jpgコード： HTML コード スニペット: コードをコピー コードは次のとおりです。<a name="checkWeek" class="divCheckBoxNoSel"></a> 月曜日 JavaScript コードスニペット: コードをコピー コードは次のとおりです。$("a[name='checkWeek']").click(function(){ if($(this).hasClass('divCheckBoxSel')){ $(this).removeClass('divCheckBoxSel'); }それ以外{ $(this).addClass('divCheckBoxSel'); } }); CSS コード スニペット: コードをコピー コードは次のとおりです。.divチェックボックスなし{ 背景: url("../image/checkboxNoSel.jpg") 繰り返しなし 中央 中央; フロート:左; 幅:15px; 高さ:15px; 境界線:1px 実線 #BDBDBD; 色:#FFF; } .divチェックボックス選択{ 背景: url("../image/checkboxSel.jpg") 繰り返しなし 中央 中央; フロート:左; 幅:15px; 高さ:15px; 境界線:1px 実線 #BDBDBD; 色:#FFF; } 各ハイパーリンクを区別する方法は多数あり、実際、ラジオ ボタンのようなテキストもこの方法で簡単に実現できるため、時間を節約できます。 |
<<: Docker+nacos+seata1.3.0 のインストールと使用設定チュートリアル
>>: CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)
推薦する
Samba を使用して Linux サーバー上で共有ファイル サービスを構築する方法
最近、私たちの小さなチームは、サーバー上の共有フォルダーを共有して、全員がパブリックリソースドキュメ...
CSS で垂直方向の中央揃えを行う 7 つの方法の詳細なコード例
レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...
Vue Element UIの使用時に遭遇した問題をまとめる
目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...
パスワードログインなしでCentOS7にxshellリモートログインするアイデアを詳しく解説
まず、全体的な考え方についてお話しします。 1. パスワードを使用してCentOSシステムにログイン...
シンプルな時計を実装するJavaScript
この記事では、JavaScriptでシンプルな時計を実装するための具体的なコードを参考までに紹介しま...
Viteプロジェクトを作成する手順
目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...
CSS ファンタスティックボーダーアニメーション効果の実装
今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...
MySQL がデータの削除と挿入に非常に時間がかかる問題の解決策
会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...
DOM操作テーブルの例（DOMはテーブルを作成します）
1. HTML タグを使用してテーブルを作成します。コードをコピーコードは次のとおりです。 <...
JavaScript のスプレッド演算子とレスト演算子の違いの詳細な説明
目次レスト演算子とは何ですか? JavaScript 関数では REST 演算子はどのように機能しま...
MySQL マルチバージョン同時実行制御 MVCC の実装
目次MVCCとはMVCC 実装MVCC はファントム リードを解決しますか? MVCCとはMVCC ...
Mysql varchar型の合計操作例
友人の中には、データベースについて学習しているときに、テーブル構造を作成するときに誤ってフィールドを...
解析を実装するためにPostgreSQLデータベースを書き込むSQLスクリプト関数
この記事は主に、PostgreSQL データベースを記述して解析を実装する SQL スクリプト関数を...
複数のサーバーにNginxリバースプロキシを実装する方法
Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...
JavaScript コンストラクタとプロトタイプの関係
目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...