JQuery: l'obtention de la valeur/texte/innerHtml d'une case à cocher dans un ASP.NET CheckBoxList de contrôle

Vous pouvez utiliser le sélecteur vous utilisez déjà (mais il suffit d'utiliser la clientId), puis obtenir le frère suivant (sur l'étiquette) et obtenez sa valeur de texte

e.g

$("#" + Control.ClientId).next().text();

Ou vous pouvez juste obtenir le label à l'aide de son attribut

$("label[for=" + Control.ClientId + "]").text();

OriginalL'auteur redsquare

Permet de voir Si ListItems ont leur texte et des valeurs différentes ? -

Je l'ai expliqué tous les cas possibles d'obtenir des valeurs/texte de la case à cocher ou checkboxlist comme ci-dessous:-

Cas 1:- Si CheckBoxList Éléments de Texte et les Valeurs sont les mêmes

<asp:CheckBoxList ID="CheckBoxList1" runat="server" Width="180">
            <asp:ListItem Value="SQL" Text="">SQL</asp:ListItem>
            <asp:ListItem Value="ASP.Net" Text="">ASP.Net</asp:ListItem>
            <asp:ListItem Value="jQuery" Text="">jQuery</asp:ListItem>
            <asp:ListItem Value="MVC" Text="">MVC</asp:ListItem>
            <asp:ListItem Value="IIS" Text="">IIS</asp:ListItem>
        </asp:CheckBoxList>

appel ci-dessous js fonction onclick ou partout où vous avez besoin (si nécessaire appel dans le document.prêt bloc)

function getChkVal1() {
            $chk_values = $("[id$=CheckBoxList1] input[type=checkbox]:checked").map(function (index, foElem) {
                return $(this).next().html();
            }).get();

            alert($chk_values);
        }

Cas 2:- Si CheckBoxList Éléments de Valeurs est dans l'Ordre Numérique (ex: 1,2,3 ...n, bien sûr, de nombreuses fois que nous utilisons cette façon)

<asp:CheckBoxList ID="CheckBoxList2" runat="server" BackColor="#ffcccc" Width="180">
            <asp:ListItem Value="1" Text="">SQL</asp:ListItem>
            <asp:ListItem Value="2" Text="">ASP.Net</asp:ListItem>
            <asp:ListItem Value="3" Text="">jQuery</asp:ListItem>
            <asp:ListItem Value="4" Text="">MVC</asp:ListItem>
            <asp:ListItem Value="5" Text="">IIS</asp:ListItem>
        </asp:CheckBoxList>

js fonction serait comme ci-dessous

function getChkVal2() {
            $chk_values = $("[id$=CheckBoxList2] input[type=checkbox]").map(function (index, foElem) {
                if ($(this).is(":checked"))
                    return (index + 1);
            }).get();

            alert($chk_values);
        }

Cas 3:- Si CheckBoxList Éléments les Valeurs sont certains shortforms/initiales de son texte (e.g de Mangue, je dirais "M")

Ici, j'ai utilisé une astuce pour obtenir les valeurs des cases à cocher sur la page de sorte qu'il peut être facilement accessible lors de l'écriture de script js.
C'est, je suis en utilisant un hiddenfield avec checkboxlist qui permettra d'obtenir toutes les valeurs disponibles dans checkboxlist cours d'analyse html et de les stocker sur la page de sa valeur.
Voir ci-dessous:-

<asp:CheckBoxList ID="CheckBoxList3" runat="server" BackColor="#ffccff" Width="180">
            <asp:ListItem Value="S" Text="">SQL</asp:ListItem>
            <asp:ListItem Value="A" Text="">ASP.Net</asp:ListItem>
            <asp:ListItem Value="J" Text="">jQuery</asp:ListItem>
            <asp:ListItem Value="M" Text="">MVC</asp:ListItem>
            <asp:ListItem Value="I" Text="">IIS</asp:ListItem>
        </asp:CheckBoxList>
        <input type="hidden" id="hdnChkBox3" value='<%=String.Join( ",", CheckBoxList3.Items.Cast<ListItem>().Select(item=>item.Value) ) %>' />

Je suis à l'aide d'un code html hiddenfield pas le runat=server un que nous n'avons pas besoin d'écrire du code en cs à l'aide de cette hiddenfield. Ici, le rôle de hiddenfield n'est rien mais le consolateur, qui permettra d'offrir plus de confort lors de l'écriture de js et pour obtenir les valeurs des checkbox.

Et maintenant, nous allons voir la façon dont le scénario serait d'oeil:-

function getChkVal3() {
            $chk_items = $("#hdnChkBox3").val().split(","); //Get all checkboclist values from hiddenfield and convert it to array using split()
//so now we have ItemIndex and Values Index in Array as parallel            
$chk_values = $("[id$=CheckBoxList3] input[type=checkbox]").map(function (index, foElem) {
                if ($(this).is(":checked")) {
                    return ($chk_items[index]);     
                }
            }).get();

            alert($chk_values);
        }

De la même façon que vous pouvez faire sur radibuttonlist/radiobutton.

OriginalL'auteur ramby