あまりコードを使わずに美しいチェックボックスを簡単にカスタマイズしてハイパーリンク_HTML/Xhtml_Webページ制作が可能

今日ふと、HTMLのチェックボックスは変更できるスタイルが限られていて、チェックボックスを作るには大量のコードを書かなければならないのではないかと思い、簡単な実装を考えました。これが可能であることが完全に証明されました。あまり言うことはありませんが、参考のためにソースコードを投稿してください。

効果：

未選択時： 選択時：

画像背景：

checkboxSel.jpg

checkboxNoSel.jpg

コード:

html コード スニペット:

コードをコピーします

コードは次のとおりです:

< ;/ a> Monday

JavaScript コード スニペット:

コードをコピーします

コードは次のように:

$("a[name='checkWeek']").click(function(){
if($(this).hasClass('divCheckBoxSel')){
$(this).removeClass('divCheckBoxSel');
}else{
$(this).addClass('divCheckBoxSel');


CSS コード スニペット:

コードをコピー コードは次のとおりです:

.divCheckBoxNoSel{

background: url("../image/checkboxNoSel.jpg") リピートなし 中央中央;
幅:15px;
高さ:15px; ;
border:1px ソリッド #BDBDBD;
color:#FFF;
.divCheckBoxSel{
background: url("../image/checkboxSel.jpg")中央;
浮動小数点: 左;
高さ: 15px;
色:#FFF; 🎜>
それぞれを区別する ハイパーリンクについてはあまり説明されていませんが、実際には、同様のラジオ ボタンもこの方法で簡単に実装できるため、時間を節約できます。