Maison >interface Web >js tutoriel >Comment implémenter les fonctions « tout sélectionner » et « ne sélectionner aucun » en JavaScript ? (exemple de code)

Comment implémenter les fonctions « tout sélectionner » et « ne sélectionner aucun » en JavaScript ? (exemple de code)

青灯夜游original: 2020-06-16 10:27:323704parcourir

Cet article vous présentera comment utiliser JavaScript pour implémenter les fonctions « tout sélectionner » et « tout désélectionner ». L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>

  function clickon() {
    // 获取到body中所有checkbox
    var checkbox = document.querySelectorAll("input[type=&#39;checkbox&#39;]");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = true;
    }
  }

  function unclick() {
    var checkbox = document.querySelectorAll("input[type=&#39;checkbox&#39;]");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = false;
    }
  }

</script>
<body>

<form>
  <input type="checkbox">吃
  <input type="checkbox">喝
  <input type="checkbox">拉
  <input type="checkbox">撒
  <input type="button" value="全选" onclick="clickon()">
  <input type="button" value="全不选" onclick="unclick()">
</form>

</body>
</html>

Effet

Pour plus d'effets spéciaux jQuery et Javascript, c'est recommandé de visiter : collection d'effets spéciaux js !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS implémente un bel effet de bulle de couleur qui suit la souris (code ci-joint)Article suivant：JS implémente un bel effet de bulle de couleur qui suit la souris (code ci-joint)

Articles Liés

Voir plus