Cochez toutes les cases HTML

J'ai une petite liste de cases à cocher (voir ci-dessous), et j'ai remarqué que je peux utiliser un élément d'entrée avec type = "reset" et cela désélectionnera toutes les cases. Je sais que l'utilisation de l'entrée serait mieux qu'un événement "onClick" du lien, parce que je ne compterais pas sur JavaScript, mais pour cet exemple, j'ai les deux.Cochez toutes les cases HTML

<a onclick="javascript:document.myList.reset();" href="#">select none</a> | 
<a href="#">select all</a> 
<form name="myList"> 
    <input type="checkbox" name="item1"/>Item 1<br/> 
    <input type="checkbox" name="item2"/>Item 2<br/> 
    <input type="reset" name="none"/> 
    <input type="submit" name="submit"/> 
</form>

Quelle est la meilleure façon d'implémenter le "Select all"? J'aurais probablement besoin d'écrire une fonction JavaScript qui boucle tous les éléments "input" de la forme "myList" avec type = "checkbox" et de mettre la valeur à "0" ou quelque chose. En outre, quelle est la bonne façon de faire cela?

Je suppose qu'il n'y a pas de manière HTML de faire cela comme la réinitialisation? (Je ne pouvais pas en trouver un.)

Source

2009-02-14 occhiso

Juste pour clarifier, remise à zéro HTML va tout changer à la façon dont il était. Si votre case a été cochée pendant le rendu, le bouton de réinitialisation le fera cocher. –

Ouais, vous devriez utiliser JS.

for(var ix = 0; ix < document.myList.elements.count; ix++) 
    if(document.myList.elements[ix].type == 'checkbox') 
     document.myList.elements[ix].checked = true;

Source

2009-02-14 00:42:19 chaos

Je pense que c'est .checked = true; –

Merci, c'est gentil et simple. Je l'ai raccourci et mis en ligne (pourrait le sortir à une date ultérieure), et testé dans IE et Firefox. Produit fini: select all – occhiso

Correct, il n'y a pas de manière HTML. Vous devez utiliser JavaScript ou un autre langage pour l'implémenter.

Source

2009-02-14 00:37:55 brendan

La réinitialisation le rétablira à son état initial. Cela signifie que si toutes vos cases ont été cochées avant d'être modifiées, le fait d'appuyer sur reset les ramènera à cet état.

Je suggère d'utiliser jQuery pour pour apporter des modifications à de nombreux éléments à la fois:

$("form[name='myList'] :checkbox").attr("checked", true);

ou avec JavaScript pur:

for(var i in document.myList.childNodes) 
    if(document.myList.childNodes[i].type == "checkbox") 
     document.myList.childNodes[i].checked = true;

Source

2009-02-14 00:41:57

vous pouvez également utiliser la fonction jquery .each

Source

2012-10-13 07:29:37 RDK

Cochez toutes les cases HTML

Répondre

Questions connexes