Comment puis-je activer une case à cocher?

Question

J'ai une case à cocher à l'intérieur d'une étiquette < > et je veux que cette case à cocher, lorsqu'elle est cochée ou décochée, déclencher une fonction. J'ai attaché un déclencheur onchange à la case à cocher mais dans IE6 le déclencheur ne se déclenche que lorsque le focus est décoché de la case à cocher, tandis que dans FF3 et Chrome il se déclenche tout de suite. J'ai enlevé la gâchette onchange et attaché un déclencheur onclick à l'étiquette < > mais maintenant les feux de déclenchement à deux reprises lorsque l'étiquette est cliqué une fois (ne enyone savoir pourquoi?) ...

Ma question est: comment puis-je faire la case à cocher déclenche une fonction lorsqu'elle est cochée ou décochée par un clic dessus ou sur son étiquette.

Merci.

Answer 1

Vous devez probablement activer la propriété de autopostback:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.autopostback.aspx

  <asp:CheckBox id="checkbox1" runat="server" 
       AutoPostBack="True" 
       Text="Include 8.6% sales tax" 
       TextAlign="Right" 
       OnCheckedChanged="Check_Clicked"/> 

Answer 2

En supposant que vous ne voulez pas une fantaisie solution ASP/JQuery, juste attacher la fonction à la onClick de la case à cocher lui-même devrait bien fonctionner.

(Bien sûr, vous aurez besoin d'inspecter l'état actuel de la case à cocher dans la fonction si vous voulez avoir la se comportent de fonctionner différemment selon si la case est cochée ou non.)

Answer 3

Comme « Electrons_Ahoy "dit, vous devriez être capable de simplement attacher un gestionnaire onclick à l'élément checkbox. Ce gestionnaire devrait également être appelé lorsque l'utilisateur clique sur l'étiquette au lieu de la case à cocher.

HTML:

<label><input type="checkbox" id="myCheckbox" />My Checkbox</label> 

JavaScript:

document.getElementById("myCheckbox").onclick = function() { 
    if (this.checked) { 
     alert("Checkbox was checked."); 
    } 
    else { 
     alert("Checkbox wasn't checked."); 
    } 
}; 

Le code ci-dessus semble fonctionner correctement dans Safari 4 et Firefox 3 (Je ne sais pas comment cela fonctionnerait dans IE).

Steve

Answer 4

ne sais pas si vous utilisez Prototype est une option pour vous, mais si ce que vous feriez cette façon (cela suppose Prototype 1.6 Le code écrit contre les versions antérieures seront légèrement différentes.):

HTML:

<label><input type="checkbox" id="myCheckbox" />My Checkbox</label> 

JS:

$('myCheckbox').observe('click', function(cbox) 
    { 
     var cbox = $('myCheckbox'); 
     //do work in here. 
     //cbox is the DOM element that represents your checkbox 
    } 
); 

Le faire de cette façon est légèrement plus agréable que l'approche JS «nue» (à mon avis), et c'est un peu plus sûr aussi.

Answer 5

Merci pour toutes vos réponses.

@Electrons_Ahoy et @Steve: Vous êtes serré. Mon problème était que je mettais la case à cocher à l'intérieur de la labe, donc j'ai fait ce qui suit: J'ai pris la case à cocher en dehors de l'étiquette, mis le déclencheur onclick sur la case à cocher seulement et cela fonctionne bien.J'ai aussi compris pourquoi le trgger a tiré deux fois quand la case était à l'intérieur de l'étiquette et que le déclencheur onclick était sur l'étiquette: C'est parce que quand j'ai cliqué sur l'étiquette, un clic sur la case a été simulé et la case à cocher à l'intérieur l'étiquette sur laquelle le clic a été simulé sur l'étiquette, duuuuuhhh :)