Comment ajouter une autre propriété de style à ce onClick?

Question

J'ai fait cette propriété onlick pour ma checkbox, mon js-fu est comme, pas là, comment puis-je simplement ajouter une propriété de couleur de bordure ainsi que la couleur bg?

<div id="akseptwrap">  
    <span style="left:-20px; position:relative; top:3px;"><img src="http://euroworker.no/public/upload/1_2_arrow.gif"></span> 
    <span id="salgsaksept"> 
     <input tabindex=12 value="1" type="checkbox" name="salgsvilkar" ID="Checkbox2" onclick="document.getElementById('salgsaksept').style.backgroundColor='#E5F7C7';" />&nbsp;Salgs- og leveringsvilkår er lest og akseptert 
    </span> 
</div> 

Answer 1

Vous pouvez garder dans l'attribut onclick, mais il est généralement plus facile à gérer éclaté dans un script séparé:

<span> 
    <input type="checkbox" tabindex="12" value="1" name="salgsvilkar" id="Checkbox2"/> 
    <label for="Checkbox2">Salgs- og leveringsvilkår er lest og akseptert</label> 
</span> 

<script type="text/javascript"> 
    document.getElementById('Checkbox2').onclick= function() { 
     var s= this.parentNode.style; 
     s.backgroundColor='#E5F7C7'; 
     s.border='solid blue 1px;'; 
    }; 
</script> 

J'ai utilisé this.parentNode pour obtenir l'empan autour de l'objet sur lequel on cliquait, pour supprimer l'ID supplémentaire.

Notez que puisque cela ne détecte que le clic, Si vous cliquez à nouveau pour désélectionner la case, l'intervalle restera toujours en surbrillance.

De même, n'utilisez pas le format à fermeture automatique XHTML /> à moins que vous n'écriviez réellement un document XHTML. Les valeurs d'attribut sans guillemets comme tabindex=12 ne sont pas valides dans XHTML.

re: Commentaire:

Mais plus loin, que puis-je faire pour revenir si elle est déclipsée?

Pour le rendre plus facile à manipuler de revenir, je voudrais aller aux classes:

<style type="text/css"> 
    .highlight { 
     background: #E5F7C7; 
     border: solid blue 1px; 
    } 
</style> 

...same markup... 

<script type="text/javascript"> 
    document.getElementById('Checkbox2').onclick= function() { 
     var that= this; 
     setTimeout(function() { 
      that.parentNode.className= that.checked? 'highlight' : ''; 
     }, 0); 
    }; 
</script> 

Juste enlever la classe quand this n'est pas checked réinitialisera le style à ce qu'il était avant, sans avoir se souvenir des anciennes valeurs de fond et de frontière.

À quoi sert le setTimeout? Eh bien, quand l'événement onclick se produit, vous venez de cliquer sur la case à cocher, et il n'a pas encore basculé son contrôle. En effet, si vous return false vous empêchez la case à cocher d'être changé du tout. Nous demandons donc au navigateur de nous rappeler dans un tic, après que l'action par défaut pour le clic de la case à cocher s'est produite. (Par conséquent, nous devons préserver la valeur de this, qui serait assombrie par une nouvelle, inutile this dans la fonction de temporisation.)

onclick est vraiment le mauvais événement à l'aide d'ici, il devrait être onchange. Cependant, vous verrez généralement onclick utilisé à la place parce qu'il y a un bug dans IE où il ne déclenche pas onchange tant que vous n'avez pas coché la case.

Answer 2

Je pense que ce que vous voulez, ce sont les événements de mise au point.

Avec Internet Explorer, vous aurez besoin de javascript (par exemple prototype):

document.observe('focusin',function(e){/*set colors here */}); 

Avec Firefox (et d'autres), vous pouvez le faire uniquement avec css:

#Checkbox2:focus { 
    /* set colors here */ 
} 

Answer 3

Vous pouvez essayer ceci:

$('input[type=checkbox]').click(function(){ 
$(this).attr("class","newclass"); 
}); 

Si vous définissez .newclass avec de nouveaux background-color et border

Ou cette

$('input[type=checkbox][checked]').click(function(){ 
$(this).addClass("newclass"); 
}); 

Ou vous pouvez ajouter css manuellement en remplaçant cette partie $ avec :

$(this).css("background-color", "#000"); 
$(this).css("border", "1px solid #000"); 

Il existe plusieurs façons avec jQuery