ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で「すべて選択」および「何も選択しない」関数を実装するにはどうすればよいですか? (コード例)

JavaScript で「すべて選択」および「何も選択しない」関数を実装するにはどうすればよいですか? (コード例)

青灯夜游
リリース: 2020-06-16 10:27:32
オリジナル
3739 人が閲覧しました

この記事では、JavaScriptを使用して「全選択」「全選択解除」機能を実装する方法をサンプルコードを交えて詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

コードは次のとおりです。

<!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>
ログイン後にコピー

効果

##jQuery および Javascript の特殊効果をさらに使用するには、次をお勧めします。アクセス先:

js 特殊効果コレクション !

以上がJavaScript で「すべて選択」および「何も選択しない」関数を実装するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート