Javascript cocher toutes les cases dans un tableau / asp.net

J'ai une table avec des lignes, et chaque ligne a un peu de <td> éléments. Le dernier élément a une case à cocher.
Ils sont dans un <div> qui est fixé à runat="server". J'ai une autre case à cocher sur la page intitulée "chkAll" que lorsque l'utilisateur clique dessus, je veux javascript cochez ou décochez toutes les cases de mon tableau.

Je ne suis pas très bon en Javascript, donc je ne sais pas quoi faire. J'ai ajouté un script javascript onclick méthode, et de mettre le document.getelementbyid et de mettre à la div.clientID, mais je ne savais pas quoi faire à partir de là. Des idées?

OriginalL'auteur NibblyPig | 2009-10-09

asp.net javascript

10

une fois que vous avez la <div> de l'élément de référence, utilisez getElementsByTagName() pour obtenir le <input> éléments, puis de vérifier la type bien, si c'est une case à cocher puis il est checked bien le même que le checked propriété de la case à cocher chkAll. Par exemple
```
function toggleCheckBoxes(elem) {

    var div = document.getElementById('<% = divid.ClientID %>');

    var chk = div.getElementsByTagName('input');
    var len = chk.length;

    for (var i = 0; i < len; i++) {
        if (chk[i].type === 'checkbox') {
            chk[i].checked = elem.checked;
        }
    }        
}
```
puis les attacher à cette fonction en tant que gestionnaire d'événements click de la chkAll élément
```
<input type="checkbox" id="chkAll" onclick="toggleCheckBoxes(this)" />
```
Voici un Travail De Démonstration. ajouter /modifier à l'URL pour voir le code

Fantastique, a parfaitement fonctionné!
pas de problème - vous pouvez aussi définir un gestionnaire d'événements click sur chaque case à cocher dans la <div> pour vérifier la checked bien les autres cases à cocher - si tous ne sont pas cochée, décochez chkAll case. si elles sont toutes cochée, cochez la chkAll case. Je vais laisser cette salle de l'exercice pour vous, maintenant que vous savez comment obtenir des cases à cocher et de vérifier leur checked propriété

OriginalL'auteur Russ Cam
2

Puisque vous êtes nouveau à javascript je ne vais pas recommander l'utilisation de jQuery. Obtenir des idées de base de javascript et ensuite utiliser jQuery.

Essayer celui-ci
```
function CheckAll()
{
    var tab = document.getElementById ( "tbl1" ); //table with id tbl1
    var elems = tab.getElementsByTagName ( "input" );
    var len = elems.length;

    for ( var i = 0; i < len; i++ )
    {
        if ( elems[i].type == "checkbox" )
        {
            elems[i].checked = true;
        }
    }
}
```
Si vous êtes sûr d'utiliser jQuery, vous pouvez utiliser
```
$("#tbl1 input[type='checkbox']").attr ( 'checked' , true );
```
dans le onclick function.

Merci pour votre réponse! Je suis en train de le faire fonctionner, mais il ne peut pas trouver la table, je suppose parce que je créer la table dans le code-behind de façon dynamique.
Si votre table a un id unique puis le code du travail.
utiliser le ClientID de la table dans la fonction JavaScript. Si la fonction est dans le aspx balisage, vous pouvez utiliser le serveur-côté tags <%= tableid.ClientID %> à rendre le client généré id de la table dans le code HTML envoyé au client

OriginalL'auteur rahul
1

Essayez d'utiliser jQuery - il rend javascript beaucoup plus facile et moins verbeux.

Je pense qu'une solution à votre problème peut être trouvée ici:

http://www.iknowkungfoo.com/blog/index.cfm/2008/7/9/Check-All-Checkboxes-with-JQuery

OriginalL'auteur Paul

Essayez ce qui suit:

en aspx:

<asp:CheckBox ID="chkAll" onclick="javascript:CheckUncheckall(this);" Text="Select" runat="server" />
            <table id="tbl" runat="server">
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox1" runat="server" Text="A" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox2" runat="server" Text="B" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox3" runat="server" Text="C" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox4" runat="server" Text="D" /></td>
                </tr>
                <tr>
                    <td>
                        <asp:CheckBox ID="CheckBox5" runat="server" Text="E" /></td>
                </tr>
            </table>

et le code javascript ci-dessous:

 <script language="javascript" type="text/javascript">
    function CheckUncheckall(chk) {
    var chks = document.getElementById("<% = tbl.ClientID %>").getElementsByTagName("input");
    for(var i=0; i<chks.length; i++) {
        if(chks[i].type == "checkbox") chks[i].checked= chk.checked;
    }
}
    </script>

OriginalL'auteur Himadri

Je veux javascript cocher ou décocher
toutes les cases de mon tableau

<table id="goofy">...</table>

<a href="#" onclick="f(); return false;">Click me to check all boxes in table</a>

Et JavaScript:

function f() {
    var inputs_in_table = document.getElementById("goofy").getElementsByTagName("input");
    for(var i=0; i<inputs_in_table.length; i++) {
        if(inputs_in_table[i].type == "checkbox") inputs_in_table[i].checked= true;
    }
}

OriginalL'auteur Luca Matteis

j'ai créé une version modifiée à l'aide de ce script où vous pouvez passer le nom de la table et de la case nom de façon dynamique.
Cliquez ici pour obtenir plus infomarion

function checkedAll(container,chkID)
{

var tab = document.getElementById ( container ); //get table  id  which contain check box
var elems = tab.getElementsByTagName ( “input” );

for ( var i = 0; i < elems.length; i++ )
{

if ( elems[i].type == “checkbox” )
{

if ( document.getElementById(chkID).checked ==true)

elems[i].checked = true;

else

elems[i].checked = false;
}

}

}

OriginalL'auteur

0

Vous pourriez économiser sur le bouclage des éléments en utilisant jquery pour accéder directement à des cases à cocher et ensuite en boucle.
```
$('input[type=checkbox]').each(function(){ 
    this.checked = true  
});
```
Si vous voulait isoler une partie spécifique de la page:
```
$(mydiv).find('input[type=checkbox]').each(function(){ 
    this.checked = true 
});
```
OriginalL'auteur JackalopeZero

Vous devez vous connecter pour publier un commentaire.