JavaScript コントロールのチェック ボックスで 2 つの項目のみを選択できるようになると、他は何も選択できなくなります。

Webアプリケーションの開発に伴い、JavaScriptはフロントエンドエンジニアにとって必須の知識の一つとなっています。チェックボックスは一般的な Web コントロールの 1 つであり、JavaScript を使用してチェックボックスの相互作用を制御できます。この記事では、JavaScript を使用してチェックボックスを制御する方法を紹介します。2 つの項目だけ選択できるようになり、残りのオプションは選択できなくなります。

1. HTML の基本

JavaScript を使用してチェック ボックスを制御する前に、まず HTML のチェック ボックスの基本構文を理解する必要があります。 HTML のチェック ボックスは、 タグを使用して実装されます。type 属性を "checkbox" に設定すると、チェック ボックスが作成されます。例:

<input type="checkbox" name="option1" value="1">

上記のコードは、値が 1 の「option1」という名前のチェックボックスを作成します。 name 属性を通じて、後続の JavaScript コードでこのチェック ボックスを見つけることができ、value 属性を通じて、チェック ボックスの選択状態を取得または設定できます。

2. JavaScript の実装

次に、JavaScript を使用してチェック ボックスを制御する方法を説明します。主な考え方は、チェックボックスをオンにすると、チェックされていない残りのチェックボックスが無効になるということです。 addEventListener() メソッドを使用して各チェック ボックスにクリック イベントを追加し、イベント コールバック関数に上記のロジックを実装できます。

以下は具体的な実装コードです:

// 获取所有复选框元素
var checkboxes = document.querySelectorAll("input[type='checkbox']");
// 选择次数计数器，初始化为0
var checkedCount = 0;

// 遍历所有复选框，为它们添加点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("click", function() {
    if (this.checked) {
      // 如果当前复选框被选中，判断当前是否已选中两项
      if (checkedCount >= 2) {
        // 已选中两项，禁用其余未选中的复选框
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            checkboxes[j].disabled = true;
          }
        }
      } else {
        // 尚未选中两项，计数器+1
        checkedCount++;
      }
    } else {
      // 如果当前复选框被取消选中，计数器-1，检查是否需要解除禁用
      checkedCount--;
      if (checkedCount < 2) {
        for (var j = 0; j < checkboxes.length; j++) {
          checkboxes[j].disabled = false;
        }
      }
    }
  });
}

上記のコードでは、最初に document.querySelectorAll() メソッドを使用してすべてのチェック ボックス要素を取得し、記録するカウンタ CheckedCount を定義します。選択されたチェックボックスの数。次に、すべてのチェックボックス要素を反復処理し、それらにクリック イベントを追加します。各クリック イベント コールバック関数で、現在のチェックボックスが選択されているかどうかを確認します。選択した場合、選択した数値が 2 に等しいかどうかを判断します。 2 未満の場合はカウンターを 1 に設定し、そうでない場合は残りのチェックされていないチェックボックスを無効にします。チェックボックスがオフになっている場合は、-1 をカウントして、チェックを外す必要があるかどうかを確認します。

3. 効果のデモンストレーション

上記の JavaScript コードの効果を HTML ページでテストできます。上記のコードを checkbox.js などの JavaScript ファイルとして保存し、この JavaScript ファイルを HTML ページにリンクします:

<script src="checkbox.js"></script>

次に、HTML ページに複数のチェックボックスを追加します。例:

<input type="checkbox" name="option1" value="1">选项1

选项2

选项3

选项4

选项5

この HTML ページをブラウザで開くと、複数のチェック ボックスが表示されます。チェックボックスのうち 2 つを選択すると、残りのチェックボックスは選択できなくなります。

4. 概要

JavaScript を使用すると、チェック ボックスの選択動作の制御など、Web アプリケーションでの対話を簡単に制御できます。上記の実装方法はアイデアの 1 つであり、実際にはニーズに応じて調整および最適化することができます。この記事が、Web アプリケーション開発における JavaScript の応用と実践を誰もが理解するのに役立つことを願っています。

以上がJavaScript コントロールのチェック ボックスで 2 つの項目のみを選択できるようになると、他は何も選択できなくなります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。