あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。

今日ふと、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 の使い方 (オーバーフローの非表示とフロートのクリア)