Vous pouvez facilement personnaliser de belles cases à cocher sans utiliser trop de code et utiliser la production de pages hyperlinks_HTML/Xhtml_Web.

Aujourd'hui, j'ai soudainement pensé que les cases à cocher en HTML avaient des styles limités qui pouvaient être modifiés, et que créer une case à cocher nécessite maintenant d'écrire beaucoup de code, puis j'ai pensé à une implémentation simple. Complètement prouvé que cela est possible. Pas grand chose à dire, postez simplement le code source pour votre référence.

Effet :

Lorsqu'il n'est pas sélectionné : Lorsqu'il est sélectionné :

Fond de l'image :

checkboxSel.jpg

checkboxNoSel.jpg

Code :

extrait de code HTML :

Copier le code

Le code est le suivant :

< ;/ a> Lundi

Extrait de code javascript :

Copier le code

Le code est comme suit :

$("a[name='checkWeek']").click(function(){
if($(this).hasClass('divCheckBoxSel')){
$( this).removeClass('divCheckBoxSel');
}else{
$(this).addClass('divCheckBoxSel');
}
} ; 🎜>
Extrait de code CSS :

Copier le code Le code est le suivant :

.divCheckBoxNoSel{

background: url("../image/checkboxNoSel.jpg") centre sans répétition ;
float:left
width:15px
height:15px; ;
border:1px solid #BDBDBD;
color:#FFF;
}
.divCheckBoxSel{
background: url("../image/checkboxSel.jpg") non-répétition centre centre ;
float : gauche
largeur : 15px ;
hauteur : 15px ;
bordure : 1px solide
couleur :#FFF ; 🎜>
Distinguer chacun. Les hyperliens ne sont pas expliqués de plusieurs manières. En fait, des boutons radio similaires peuvent également être facilement implémentés de cette manière, permettant ainsi de gagner du temps.