javascript pilih semua batalkan

JavaScript ialah bahasa skrip yang digunakan secara meluas yang sering digunakan untuk pembangunan web bahagian hadapan. Dalam pembangunan web, ia selalunya melibatkan pelaksanaan pilih semua dan nyahpilih semua fungsi Pada masa ini, kita biasanya perlu menggunakan JavaScript. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan pilih semua dan nyahpilih semua fungsi.

1. Kod HTML

Sebelum melaksanakan pilih semua dan nyahpilih semua fungsi, kita perlu menulis kod HTML terlebih dahulu. Berikut ialah contoh kod HTML, termasuk pengepala jadual dan kandungan:

<div class="tableContainer">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="selectAll"/>javascript pilih semua batalkan</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>

Dalam pengepala jadual, kami menambah kotak semak pilih-semua, tetapkan idnya kepada "pilihSemua", dan tetapkan id setiap baris dalam baris lain Kotak pilihan juga ditambah pada sel pertama dan kelasnya ditetapkan kepada "kotak semak".

2. Kod JavaScript

Seterusnya, kami perlu menulis kod JavaScript untuk melaksanakan fungsi kami. Kita perlu menambah acara pada kotak semak pilih semua di kepala jadual dan kotak semak setiap baris untuk melaksanakan fungsi memilih semua dan menyahpilih semua. Berikut ialah kod JavaScript:

<script>
  // 获取表格头部的javascript pilih semua batalkancheckbox
  var selectAll = document.getElementById("selectAll");
  // 获取每一行中的checkbox
  var checkboxes = document.getElementsByClassName("checkbox");
 
  // 给表格头部的javascript pilih semua batalkancheckbox绑定点击事件
  selectAll.onclick = function() {
    // 循环遍历每一行的checkbox
    for(var i=0; i < checkboxes.length; i++) {
      // 将每一行的checkbox的选中状态设置为表格头部的javascript pilih semua batalkancheckbox的选中状态
      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 pilih semua batalkancheckbox的选中状态设置为isCheckedAll
      selectAll.checked = isCheckedAll;
    }
  }
</script>

3. Kesan pelaksanaan

Selepas kod HTML dan JavaScript selesai, kami boleh melaksanakan fungsi memilih semua dan menyahpilih semua.

Apabila pengguna menyemak kotak semak Pilih Semua di pengepala jadual, kotak semak dalam semua baris akan ditandakan secara automatik:

Apabila pengguna menyahtanda kotak semak Apabila memilih kotak semak Pilih Semua di pengepala jadual, kotak semak dalam semua baris akan dinyahtandai secara automatik:

Dan apabila pengguna menandai atau menyahtanda kotak semak baris tertentu Bila dan bagaimana untuk membatalkan fungsi pilih semua. Dengan menulis kod HTML dan JavaScript, kami boleh dengan mudah melaksanakan fungsi memilih semua dan menyahpilih semua, dengan itu meningkatkan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci javascript pilih semua batalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!