web-dev-qa-db-fra.com

Cochez la case Tout par Javascript ou console

J'ai 100 cases à cocher sur ma page Web. À des fins de test, je veux cocher toutes ces cases, mais cliquer manuellement prend du temps. Existe-t-il un moyen possible de les faire cocher?

Peut-être un JavaScript ou Chrome Fenêtre de console, quoi que ce soit?

javascripthtmlcheckboxdom-events
19
Yahoo

Le moyen le plus direct serait de récupérer toutes vos entrées, de filtrer uniquement les cases à cocher et de définir la propriété cochée.

var allInputs = document.getElementsByTagName("input");
for (var i = 0, max = allInputs.length; i < max; i++){
    if (allInputs[i].type === 'checkbox')
        allInputs[i].checked = true;
}

Si vous utilisez jQuery - et je ne dis pas que vous devriez commencer à cocher toutes vos cases pour les tests - vous pouvez simplement le faire

$("input[type='checkbox']").prop("checked", true);

ou comme le souligne Fabricio:

$(":checkbox").prop("checked", true);
43
Adam Rackis

Méthode JS pure, n'utilisez pas jQuery .. c'est juste idiot pour quelque chose de si trivial.

[].forEach.call( document.querySelectorAll('input[type="checkbox"]'),function(el){
       el.checked=true;
     }
);​

Démo en direct

Pour l'utiliser sur n'importe quelle page Web, vous pouvez le coller dans la barre d'adresse

javascript:[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){el.checked=true});

faites-le glisser vers vos signets, et vous avez un bookmarklet. Cliquez simplement dessus chaque fois que vous devez l'utiliser sur une page.

14
Loktar

en utilisant jquery , aussi simple que cela

$('input:checkbox').each(function () {
   // alert(this);
   $(this).attr('checked', true);
  });

Ou utilisez simplement

$('input:checkbox').prop('checked', true);// use the property

OR

 $('input:checkbox').attr('checked', true); // by using the attribute
4
Talha

Cochez toutes les cases et décochez toutes les cases

Tout ce que vous devez changer, c'est le nom du tag pour changer ce qu'il allume/éteint

<FORM>
    <input type="checkbox" name="item0[]" onclick="CheckAll(this)" />
    <input type="checkbox" name="item0[]" value="1" />
    <input type="checkbox" name="item0[]" value="2" />
    <input type="checkbox" name="item0[]" value="3" />
    <br>
    <input type="checkbox" name="item1[]" onclick="CheckAll(this)" />
    <input type="checkbox" name="item1[]" value="a" />
    <input type="checkbox" name="item1[]" value="b" />
    <input type="checkbox" name="item1[]" value="c" />
    <br>
    <input type="checkbox" name="item2" onclick="CheckAll(this)" />
    <input type="checkbox" name="item2" value="a1" />
    <input type="checkbox" name="item2" value="b2" />
    <input type="checkbox" name="item2" value="bc" />
</FORM>

<script>
    function CheckAll(x)
    {
        var allInputs = document.getElementsByName(x.name);
        for (var i = 0, max = allInputs.length; i < max; i++) 
        {
            if (allInputs[i].type == 'checkbox')
            if (x.checked == true)
                allInputs[i].checked = true;
            else
                allInputs[i].checked = false;
        }
    }
</script>
2
Michael

Ce code JS cochera toutes les cases de votre page:

var a = document.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<a.length; i++)
    a[i].checked = true;​

Démo en direct

Il vous suffit alors de créer un bookmarklet avec, disons, avec ce créateur de bookmarklet , qui génère ce code de bookmarklet:

javascript:var a=document.querySelectorAll('input[type="checkbox"]');for(var i=0;i<a.length;i++)a[i].checked=true;%E2%80%8B

Ajoutez simplement cet URI à un signet dans votre barre d'outils de signet, puis tout ce que vous avez à faire est de cliquer dessus chaque fois que vous avez besoin de toutes les cases à cocher de votre page pour être vérifiées. =]

2
Fabrício Matté

J'ai répondu à cette question à Vérifier tout cases à cocher dans la page via les outils de développement

En bref, vous pouvez le faire à partir de la console des outils de développement (F12) en:

$$('input').map(i => i.checked = true)

ou

$$('input[type="checkbox"').map(i => i.checked = true)

1
Vlad Bezden
  function selectAll(elem)
  {
  for (i = 0; i < elem.length; i++)
    elem[i].checked = true ;
  }

En cliquant sur un bouton, appelez cette méthode et passez le nom de l'élément (les cases à cocher - elles doivent toutes porter le même nom).

0
Amritpal Singh