Gunakan jquery untuk memilih semua

Apabila aplikasi web moden menjadi semakin kompleks, terutamanya apabila penggunaan kotak berbilang pilihan dan menu berbilang pilihan menjadi semakin biasa, fungsi pilih-semua menjadi semakin diperlukan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi pilih semua dan menambah pengalaman pengguna yang lebih baik pada aplikasi web kami.

Pertama, kita perlu menggunakan perpustakaan jQuery dalam halaman. Kami boleh memuat turun perpustakaan jQuery terkini dari laman web rasmi jQuery dan memperkenalkannya, atau menggunakan fail perpustakaan jQuery dalam CDN (rangkaian pengedaran kandungan). Dalam artikel ini, kami akan menggunakan CDN untuk mengimport fail perpustakaan jQuery.

Seterusnya, kita perlu menambah kotak pilihan Pilih Semua pada kotak pilihan pada halaman Kotak pilihan ini akan mengawal keadaan bertanda semua kotak pilihan lain. Kita boleh mencapai ini menggunakan kod HTML berikut:

<input type="checkbox" id="checkAll"> 全选
<br>
<input type="checkbox" class="check"> 选项1
<br>
<input type="checkbox" class="check"> 选项2
<br>
<input type="checkbox" class="check"> 选项3

Di sini, kami telah menambahkan atribut id untuk kotak pilihan pilih semua dan atribut kelas yang sama untuk pilihan lain. Ini akan memudahkan pemilihan elemen kami dalam kod jQuery.

Kemudian, kita perlu menulis kod jQuery untuk melaksanakan fungsi pilih semua. Kita perlu menggunakan peristiwa perubahan untuk mengesan keadaan kotak pilihan yang ditandai dan menetapkan keadaan kotak pilihan lain. Berikut ialah kod jQuery:

$(document).ready(function() {
  // 全选复选框被选中时，所有其他复选框也被选中
  $('#checkAll').change(function() {
    $('.check').prop('checked', $(this).prop('checked'));
  });
  
  // 检测其他复选框的选中状态，如果所有复选框都被选中，就选中全选复选框
  $('.check').change(function() {
    if($('.check:checked').length == $('.check').length) {
      $('#checkAll').prop('checked', true);
    } else {
      $('#checkAll').prop('checked', false);
    }
  });
});

Penjelasan kod: Pertama, kami menggunakan fungsi .ready() jQuery untuk melaksanakan kod selepas dokumen dimuatkan. Kemudian, sekiranya berlaku perubahan pada kotak semak pilih semua, kami menggunakan fungsi prop() jQuery untuk menukar keadaan pilihan semua kotak semak lain untuk mencapai fungsi pilih semua.

Dalam peristiwa perubahan kotak pilihan lain, kami mengesan keadaan pemilihan dan menetapkan keadaan pilihan kotak pilihan pilih semua kepada nilai yang sepadan. Jika semua kotak pilihan dipilih, kotak pilihan Pilih Semua juga dipilih. Jika tidak, kotak semak Pilih Semua tidak akan dipilih.

Akhir sekali, kita perlu mencantikkan kotak pilihan ini untuk menjadikannya lebih cantik dan mudah digunakan. Kita boleh melakukan ini menggunakan gaya CSS.

.check {
  margin-left: 20px;
}

Kami menggunakan margin-kiri untuk meningkatkan margin kiri kotak pilihan supaya jarak tertentu dari kotak pilihan pilih semua.

Kini kami telah berjaya melaksanakan ciri pilih semua dan mencantikkannya dengan CSS. Apabila menggunakan jQuery untuk melengkapkan fungsi kecil ini, kami belajar tentang interaksi antara perpustakaan jQuery dan fail HTML dan CSS, dan cara menggunakan acara jQuery untuk melaksanakan fungsi tertentu.

Dalam pembangunan sebenar, kami boleh menggunakan fungsi kecil ini pada aplikasi web kami. Ini akan meningkatkan pengalaman pengguna dan menjadikan pemilihan berbilang pilihan lebih mudah.

Atas ialah kandungan terperinci Gunakan jquery untuk memilih semua. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!