JavaScript すべて選択キャンセル-フロントエンドQ&A-php.cn

JavaScript すべて選択キャンセル

WBOY

リリース： 2023-05-16 10:15:37

オリジナル

1013 人が閲覧しました

JavaScript は、フロントエンド Web 開発でよく使用される、広く使用されているスクリプト言語です。 Web開発では全選択機能や全選択解除機能を実装することがよくありますが、その際には通常JavaScriptを使用する必要があります。この記事では、JavaScriptを使用して全選択機能と全選択解除機能を実装する方法を紹介します。

1. HTML コード

すべて選択およびすべての選択解除関数を実装する前に、最初に HTML コードを記述する必要があります。以下は、テーブルヘッダーとコンテンツを含むサンプル HTML コードです。

<div class="tableContainer">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="selectAll"/>JavaScript すべて選択 キャンセル</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>李四</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>王五</td>
        <td>30</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</div>

ログイン後にコピー

テーブルヘッダーに、すべて選択チェックボックスを追加し、その ID を「selectAll」に設定し、各行の ID を設定しました。チェックボックスも最初のセルに追加され、そのクラスは「チェックボックス」に設定されます。

2. JavaScript コード

次に、関数を実装するための JavaScript コードを記述する必要があります。全選択、全選択解除の機能を実装するには、テーブル先頭の全選択チェックボックスと各行のチェックボックスにイベントを追加する必要があります。 JavaScript コードは次のとおりです:

<script>
  // 获取表格头部的JavaScript すべて選択 キャンセルcheckbox
  var selectAll = document.getElementById("selectAll");
  // 获取每一行中的checkbox
  var checkboxes = document.getElementsByClassName("checkbox");
 
  // 给表格头部的JavaScript すべて選択 キャンセルcheckbox绑定点击事件
  selectAll.onclick = function() {
    // 循环遍历每一行的checkbox
    for(var i=0; i < checkboxes.length; i++) {
      // 将每一行的checkbox的选中状态设置为表格头部的JavaScript すべて選択 キャンセルcheckbox的选中状态
      checkboxes[i].checked = selectAll.checked;
    }
  }
 
  // 循环遍历每一行的checkbox
  for(var i=0; i < checkboxes.length; i++) {
    // 给每一个checkbox绑定点击事件
    checkboxes[i].onclick = function() {
      // 定义一个变量，表示是否所有行中的checkbox都被选中
      var isCheckedAll = true;
      // 循环遍历每一行的checkbox
      for(var j=0; j < checkboxes.length; j++) {
        // 如果有一个checkbox没有被选中，将isCheckedAll设置为false
        if(!checkboxes[j].checked) {
          isCheckedAll = false;
          break;
        }
      }
      // 将表格头部的JavaScript すべて選択 キャンセルcheckbox的选中状态设置为isCheckedAll
      selectAll.checked = isCheckedAll;
    }
  }
</script>

ログイン後にコピー

3. エフェクトの実装

HTML と JavaScript コードが完了したら、すべてを選択する機能とすべての選択を解除する機能を実装できます。

ユーザーがテーブルのヘッダーにある [すべて選択] チェックボックスをオンにすると、すべての行のチェックボックスが自動的にオンになります:

JavaScript すべて選択キャンセル

ユーザーがチェックを外したときチェックボックステーブルのヘッダーにある [すべて選択] チェックボックスをオンにすると、すべての行のチェックボックスが自動的にオフになります。

取消JavaScript すべて選択キャンセル

そして、ユーザーが次のチェックボックスをオンまたはオフにすると、特定の行の全選択機能をキャンセルするタイミングと方法。 HTML と JavaScript コードを記述することで、すべてを選択したり、すべての選択を解除したりする機能を簡単に実装でき、Web ページのユーザーエクスペリエンスが向上します。

以上がJavaScript すべて選択キャンセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。