CheckBoxList et Javascript

Version imprimable

Bonjour,

Je voudrais que lorsque je clique sur un Item (avec une valeur précise) dans une CheckBoxList je déclencha une fonction Javascript.
Code:

1 2 3 4 5 <asp:CheckBoxList ID="cblAfficheRessource" runat="server"> <asp:ListItem Text="Text1" Value="Value1"></asp:ListItem> <asp:ListItem Text="Text2" Value="Value2"></asp:ListItem> </asp:CheckBoxList>
Je veux que lorsque je Check l'Item avec la valeur Value2 j'exécute une fonction Javascript !!!

Bonjour,

Une petite recherche sur Google t'aurais montré de nombreux scripts différents à utiliser que ce soit en JavaScript ou JQuery.

Un élément de réponse, ensuite à toi de te débrouiller :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<form id="form1" runat="server">
 <asp:CheckBoxList id="CheckBoxList1" runat="server">
  <asp:listitem Value="1">Item 1</asp:listitem>
  <asp:listitem Value="2">Item 2</asp:listitem>
  <asp:listitem Value="3">Item 3</asp:listitem>
 </asp:CheckBoxList>
 <input type="button" onclick="readCheckBoxList();" value="Read CheckBoxList" /> 
</form>
<script type="text/javascript">
<!--
function getCheckBoxListItemsChecked(elementId) 
{
 var elementRef = document.getElementById(elementId);
 var checkBoxArray = elementRef.getElementsByTagName('input');
 var checkedValues = '';
 for (var i=0; i<checkBoxArray.length; i++) 
 { 
  var checkBoxRef = checkBoxArray[i];
  if ( checkBoxRef.checked == true ) 
  {
   /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // AFAIK, you cannot get the value property of a ListItem in a CheckBoxList.
   // You can only get the Text property, which will be in an HTML label element.
   /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   var labelArray = checkBoxRef.parentNode.getElementsByTagName('label');
   if ( labelArray.length > 0 )
   {
    if ( checkedValues.length > 0 )
     checkedValues += ', ';
    checkedValues += labelArray[0].innerHTML;
   }
  }
 }
 return checkedValues;
}
function readCheckBoxList() 
{
 var checkedItems = getCheckBoxListItemsChecked('<%= CheckBoxList1.ClientID %>');
 alert('Items checked: ' + checkedItems);
}
// -->
</script>

En espérant t'avoir aidé.

15/03/2010, 12h40
Morad ISSOULGHANE

Merci pour la réponse, mais moi je veux un test sur la valeur et non pas sur le text, j'ai bien trouvé cet exemple sur le net. Mais le problème comme je t'ai déja dit, c'est que moi je veux un test sur la valeur !!!

Merci pour ta réponse quand même :ccool:

Le commentaire dans le code fournis par Nicolas Esprit est assez clair sur ce point :

Code:

1
2
3
4
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // AFAIK, you cannot get the value property of a ListItem in a CheckBoxList.
   // You can only get the Text property, which will be in an HTML label element.
   /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

tu ne pourras récupérer que le texte de l'élément sélectionné.

15/03/2010, 13h01
Nicolas Esprit

Une autre solution serait d'utiliser un UpdatePanel, une méthode c# qui vérifiera la valeur et ensuite un petit RegisterStartupScript pour appeller la méthode Javascript de ton choix.

C'est sûr qu'il serait plus pratique d'appeller directement une seule méthode JavaScript...
15/03/2010, 13h03
Morad ISSOULGHANE
oui c'est exact calagan99 !!!
mais est ce que ce n'est pas possible en ajoutant des attributs aux éléments de la CheckBoxList après binding en codebehind.
Code:

1 2 3 4 5 6 foreach (ListItem item in this.cblAfficheRessource.Items) { if(item.value=="value2") item.Attributes.Add("onclick", "javascript:selectChanged()"); }
J'ai testé ça, mais ça ne marche pas :calim2:
15/03/2010, 13h22
Nicolas Esprit

Ca devrait fonctionner normalement. A quel moment ajoutes-tu les attributs ? As-tu essayé dans le Pre_Render ?

Essaye aussi ceci pour vérifier que la fonction est bien apellée :

Code:

cblAfficheRessource.Attributes.Add("onclick", "alert(this.id);");

De même, vérifie le code HTML généré pour voir si ces attributs sont bien intégrés à ta page.

Merci, c'est le PreRender.
Je partage le code complet.
ASP.NET

Code:

1
2
3
4
5
6
 
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem Value="1">Item 1</asp:ListItem>
            <asp:ListItem Value="2">Item 2</asp:ListItem>
            <asp:ListItem Value="3">Item 3</asp:ListItem>
        </asp:CheckBoxList>

Code Behind

Code:

1
2
3
4
5
6
7
8
 
void CheckBoxList1_PreRender(object sender, EventArgs e)
    {
        foreach (ListItem item in this.CheckBoxList1.Items)
        {
            if(item.Value == "2") item.Attributes.Add("onclick", "checkedChange()");
        }
    }

Cet exemple fait appel à la fonction checkedChange, lorsqu'on clique sur un élement de la CheckBoxList qui a la valeur 2.

Merci Nicolas :ccool: