Comment appeler une fonction Javascript lorsque les cases à cocher sont cochées ?

Question

J'utilise Gridclientselectcoiumn dans mon radgrid. J'ai une étiquette dans mon commanditemtemplate. Lorsque l'utilisateur coche une case, je veux juste afficher le nombre de cases sélectionnées dans cette étiquette. Supposons que l'utilisateur sélectionne 4 cases à cocher, je veux juste afficher comme Selected Records : 4. Voici mon code pour cela......

modèle de commande

<td align="right" style="width: 20%">
    Selected Records:<asp:Label ID="lblselTsks" Width="20px" Font-Size="10pt" Font-Bold="true" runat="server" Text="0"></asp:Label>
</td>

Le client de la grille sélectionne une colonne.

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="3%"
                                ItemStyle-Width="3%">
    <HeaderStyle Width="3%"></HeaderStyle>
    <ItemStyle Width="3%"></ItemStyle>
</telerik:GridClientSelectColumn>

codebehind et JS

protected void rg200_DataBound(object sender, EventArgs e)
{
    foreach (GridDataItem item in rg200.MasterTableView.Items)
    {
        CheckBox chkBoxOne = (CheckBox)item.FindControl("ClientSelectColumn");
        if (chkBoxOne != null)
            chkBoxOne.Attributes.Add("onclick", "javascript:return SelectOne('" + chkBoxOne.ClientID + "')");
    }
}

function SelectOne(id) {
    var count = 0;
    count = Number(document.getElementById('ctl00_PagePlaceholder_rg200_ctl00_ctl02_ctl00_lblselTsks').innerHTML);
    if (document.getElementById(id).checked == true) {
        if (!document.getElementById(id).disabled) {
            count = count + 1;
        }
    }
    else if (document.getElementById(id).checked == false) {
        if (!document.getElementById(id).disabled) {
            count = count - 1;
        }
    }
    document.getElementById('ctl00_PagePlaceholder_rg200_ctl00_ctl02_ctl00_lblselTsks').innerHTML = count;
}

Le problème est que lorsque je sélectionne une case à cocher comme 1 ou plus, le nombre de cases à cocher sélectionnées ne s'affiche pas. Il affiche toujours Selected Records : 0. Où est-ce que je me trompe ? Comment résoudre ce problème ? Toute aide est la bienvenue.

Answer 1

Avez-vous vérifié à l'aide d'un outil tel que Firebug que votre fonction SelectOne est appelée lorsque les cases à cocher sont cochées ? Ce serait la première étape.

Deuxièmement, si la fonction est appelée, parcourez votre JS (encore une fois, avec un outil comme Firebug) et vérifiez que votre compte est correctement incrémenté.

Il n'y a pas de problème évident avec votre code. Avez-vous envisagé d'utiliser jQuery ? Cela pourrait simplifier un peu votre code et le rendre plus facile à lire. Au lieu de document.getElementById(id) vous pouvez simplement utiliser $(id) .

Et à moins que vous ne fassiez quelque chose avec votre étiquette côté serveur, vous pouvez remplacer l'asp:Label par un simple HTML <span> o <div> et ensuite définir un identifiant client beaucoup plus propre. Par exemple :

<span id="spanCounter" style="width:20px;font-weight:bold;"></span>

Et ensuite, dans le code, vous pouvez réduire "ctl00_PagePlaceholder..." à :

$("#spanCounter").html(counter); //Sets the HTML content using jQuery

J'espère que cela vous aidera.