Urus fungsi kotak semak 'Pilih Semua/Tidak Pilih Semua' dalam bekas mandiri menggunakan jQuery

Artikel ini memperkenalkan secara terperinci bagaimana menggunakan jQuery untuk melaksanakan fungsi "Pilih Semua/Tidak Pilih Semua" pelbagai set kotak semak untuk memastikan setiap set kotak semak dikendalikan dalam bekas HTML bebas tanpa menjejaskan satu sama lain. Dengan menambahkan nama kelas tertentu ke bekas induk dan kotak semak "Pilih Semua", digabungkan dengan pendengaran acara JQuery, DOM Traversal dan Operasi Harta, kami boleh mengawal status yang dipilih bagi semua kotak semak dalam kumpulan yang sama apabila mengklik "Pilih semua"

Keperluan Teras dan Reka Bentuk Struktur HTML

Dalam pembangunan web, kami sering memenuhi keperluan untuk menyediakan ciri "Pilih Semua" dalam satu set kotak semak supaya pengguna dapat dengan cepat memilih atau nyahtanda semua pilihan yang berkaitan. Apabila terdapat beberapa set kotak semak bebas pada halaman, contohnya, dalam kategori atau kawasan yang berbeza, setiap kumpulan perlu mempunyai fungsi sendiri "pilih semua" dan tidak dapat mempengaruhi satu sama lain.

Untuk mencapai matlamat ini, kunci adalah untuk mereka bentuk struktur HTML yang munasabah dan menggunakan pemilih JQuery dan kaedah DOM Traversal untuk menentukan julat operasi.

Struktur HTML yang disyorkan adalah seperti berikut:

 <div class="Actions" id="Actions" title="Actions">
   
   <div class="mydiv">
       <viv> <input type="ceckbox" name="action" class="selectAll" value="0"> Pilih semua  <br>
       <div> <input type="ceckbox" name="action" value="1"> Item 1  <br>
       <div> <input type="ceckbox" name="action" value="2"> Item 2  <br>
       <div> <input type="ceckbox" name="action" value="3"> Item 3  <br>
   </div>

   
   <div class="mydiv">
       <div> <input type="ceckbox" name="action" class="selectall" value="26"> Pilih semua  <br>
       <div> <input type="ceckbox" name="action" value="27"> Item A  <br>
       <div> <input type="ceckbox" name="action" value="28"> item b  <br>
       <div> <input type="ceckbox" name="action" value="29"> item c  <br>
       <div> <input type="ceckbox" name="action" value="30"> item d  <br>
       <div> <input type="ceckbox" name="action" value="31"> item e 
   </div>
</div>
<p> <strong>Mata Struktur:</strong></p>
<ul>
<li> <strong>Kelas MyDIV:</strong> Setiap kumpulan kotak semak bebas dibalut dengan elemen Div dengan kelas MyDiv. Nama kelas ini adalah kunci, yang membolehkan kami dengan mudah mencari kumpulan kotak semak tertentu melalui jQuery.</li>
<li> <strong>Kelas SelectAll:</strong> Kotak semak "Pilih Semua" dalam setiap kumpulan harus menambah kelas Selectall. Ini membolehkan kami memilih dengan tepat dan mendengar kotak semak khas ini.</li>
<li> <strong>Atribut Nama:</strong> Walaupun atribut nama semua kotak semak dalam contoh ini adalah tindakan, dalam aplikasi sebenar, untuk penyerahan semantik dan bentuk yang lebih baik, atribut nama yang berbeza boleh ditetapkan untuk kumpulan kotak semak yang berlainan, tetapi ini tidak menjejaskan "pilih semua" logik dalam tutorial ini, kerana kami beroperasi berdasarkan struktur DOM.</li>
</ul>
<h3> logik pelaksanaan jQuery</h3>
<p> Kami akan melaksanakan fungsi "Pilih Semua/Tidak Pilih Semua" melalui dua pendengar acara utama: Satu digunakan untuk mengendalikan acara klik kotak semak "Pilih Semua", dan yang lain digunakan untuk mengendalikan acara klik kotak semak biasa lain dalam kumpulan.</p>
<h4> 1. Kawal acara klik kotak semak "Pilih Semua"</h4>
<p> Apabila pengguna mengklik pada kotak semak "Pilih Semua", kami perlu menyemak atau nyahtanda semua kotak semak lain dalam kumpulan yang sama berdasarkan status yang dipilih semasa.</p>
<pre class="brush:php;toolbar:false"> $ ('. SelectAll'). ON ('klik', fungsi () {
  // Dapatkan status yang dipilih dari kotak semak "Pilih Semua" semasa, biarkan isselected = $ (ini) .is (': diperiksa');

  // Cari ibu bapa terdekat. Mydiv elemen yang mana kotak semak "pilih semua" semasa dimiliki // kemudian cari semua elemen input kotak semak jenis dalam ibu bapa $ (ini) .paren ('. Mydiv').
    // Tetapkan status yang dipilih dari semua kotak semak yang dijumpai untuk selaras dengan kotak semak "Pilih Semua" $ (ini) .prop ('diperiksa', disusun);
  });
});

Parsing Kod:

• $ ('. SelectAll'). ON ('klik', fungsi () {...});: Dengar semua acara klik untuk kotak semak dengan kelas SelectAll.
• Biarkan isselected = $ (this) .is (': diperiksa');: mendapat status yang dipilih (benar atau palsu) dari kotak semak "Pilih Semua" yang sedang diklik.
• $ (ini) .paren ('. Mydiv'): Ini adalah langkah utama. Ia melintasi pokok Dom ke atas dan mendapati elemen induk yang paling terkini dengan kelas MyDiv yang sedang diklik. Ini memastikan bahawa operasi itu terhad kepada kumpulan yang mana kotak semak semasa dimiliki.
• .find ('input [type = "checkbox"]'): Di dalam elemen .mydiv yang dijumpai, cari semua elemen input kotak semak jenis.
• .seat (fungsi () {...});: melangkah ke atas kotak semak yang dijumpai ini.
• $ (this) .prop ('diperiksa', isselected);: Gunakan kaedah prop () untuk menetapkan harta yang diperiksa setiap kotak semak. Prop () adalah cara yang disyorkan untuk memanipulasi sifat elemen, terutamanya untuk sifat Boolean.

2. Kawal hubungan kotak semak bebas

Apabila pengguna mengklik mana-mana kotak semak yang tidak memilih semua dalam kumpulan, kami perlu membuat keputusan sama ada untuk memeriksa atau menyahtandakan kotak semak "Pilih Semua" dalam kumpulan berdasarkan pemilihan semua kotak semak dalam kumpulan yang sama.

 $ ('input: tidak (". selectAll")'). pada ('klik', fungsi () {
  // Dapatkan ibu bapa terdekat yang mana kotak semak sedang diklik milik.Mydiv Elemen biarkan $ parentdiv = $ (ini) .parents ('. Mydiv');

  // Dapatkan elemen DOM dari kotak semak "Pilih Semua" dalam kumpulan biarkan selectallCheckBox = $ parentDiv.find ('. SelectAll') [0];

  // Dapatkan bilangan semua kotak semak yang tidak dipilih dalam kumpulan biarkan totalIndividualInputs = $ parentDiv.find ('input: not (". Selectall")'). Panjang;

  // Dapatkan bilangan semua kotak semak yang tidak dipilih yang dipilih dalam kumpulan, biarkan checkedIndividualInputs = $ parentDiv.find ('input: diperiksa: tidak (". SelectAll")'). Panjang;

  // penghakiman logik:
  // 1. Jika kotak semak "Pilih Semua" kini dipilih, tetapi mana -mana kotak semak bebas tidak dicentang, Batalkan "Pilih Semua".
  jika (selectallCheckbox.Checked && checkedIndivualInputs <totalindividualinputs selectallcheckbox.checked="false;" jika semua kotak semak bebas dipilih pilih lain checkedindivualinputs><p> <strong>Parsing Kod:</strong></p>
<ul>
<li> $ ('input: tidak (". SelectAll")'). ON ('klik', fungsi () {...});: Dengar semua peristiwa klik yang bukan kotak semak jenis input kelas SelectAll.</li>
<li> Biarkan $ parentdiv = $ (ini) .paren ('. mydiv');</li>
<li> Biarkan selectAllCheckBox = $ parentDiv.find ('. SelectAll') [0];: Cari elemen DOM dari kotak semak "Pilih Semua" dalam kumpulan semasa. Perhatikan bahawa [0] adalah untuk mendapatkan elemen DOM asli, kerana atribut yang diperiksa adalah atribut DOM asli.</li>
<li> TotalIndividualInputs dan CheckedIndividualInputs: Kirakan jumlah kotak tidak memilih semua kotak semak dalam kumpulan dan bilangan kotak semak yang dipilih.</li>
<li> <strong>Penghakiman bersyarat:</strong><ul><li> Keadaan pertama: Jika kotak semak "Pilih Semua" dipilih (selectallCheckBox.Checked), tetapi bilangan kotak semak bebas yang sebenarnya dipilih adalah kurang daripada jumlah (checkedIndividualInputs <totalindividualinputs ini bermakna pengguna tidak dipilih kotak semak berasingan. pada masa semua hendaklah dibatalkan.><li> Yang kedua jika keadaan: Jika semua kotak semak bebas dipilih (TotalIndividualInputs === checkedIndividualInputs), kotak semak "Pilih Semua" dipilih secara automatik.</li></totalindividualinputs>
</li></ul>
</li>
</ul>
<h3> Kod sampel lengkap</h3>
<p> Menggabungkan struktur HTML dan kod jQuery di atas dan memperkenalkan perpustakaan jQuery ke dalam halaman untuk mencapai fungsi yang diperlukan.</p>
<pre class="brush:php;toolbar:false"> 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> JQuery Multiple Kumpulan Pilih Semua Kotak Semak 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
    <yaya>
        .mydiv {
            Sempadan: 1px pepejal #ccc;
            Padding: 10px;
            margin-bottom: 15px;
            latar belakang warna: #f9f9f9;
        }
        .mydiv div {
            margin-bottom: 5px;
        }
    



<div class="Actions" id="Actions" title="Actions">
   <div class="mydiv">
       <div> <input type="ceckbox" name="action" class="selectall" value="0"> ** Pilih semua tindakan **  <br>
       <div> <input type="ceckbox" name="action" value="1"> Lihat profil  <br>
       <div> <input type="ceckbox" name="action" value="2"> Edit Settings  <br>
       <div> <input type="ceckbox" name="action" value="3"> Delete Account  <br>
   </div>

   <div class="mydiv">
       <div> <input type="ceckbox" name="action" class="selectall" value="26"> ** Pilih semua kebenaran **  <b></b>
       <viv> <input type="ceckbox" name="action" value="27"> baca akses  <br>
       <div> <input type="ceckbox" name="action" value="28"> Write Access  <br>
       <div> <input type="ceckbox" name="action" value="29"> Execute Access  <br>
       <viv> <input type="ceckbox" name="action" value="30"> Hak admin  <br>
       <div> <input type="ceckbox" name="action" value="31"> Audit Logs 
   </div>
</viv>
</div>

<script>
$ (dokumen) .ready (fungsi () {
    // Klik Event $ (&#39;. SelectAll&#39;). ON (&#39;klik&#39;, fungsi () {
        biarkan isselected = $ (this) .is (&#39;: diperiksa&#39;);
        $ (this) .parents (&#39;. mydiv&#39;). cari (&#39;input [type = "checkbox"]&#39;). prop (&#39;diperiksa&#39;, isselected);
    });

    // Klik Event $ (&#39;Input: Not (". SelectAll")&#39;). ON (&#39;CLICK&#39;, FUNCTION () {
        biarkan $ parentdiv = $ (ini) .paren (&#39;. mydiv&#39;);
        Biarkan selectAllCheckBox = $ parentDiv.find (&#39;. SelectAll&#39;) [0];

        Biarkan totalIndividualInputs = $ parentDiv.find (&#39;input: not (". SelectAll")&#39;). Panjang;
        Biarkan checkedIndividualInputs = $ parentDiv.find (&#39;input: diperiksa: tidak (". SelectAll")&#39;). Panjang;

        // Jika pemilihan diperiksa, tetapi sesetengah kanak -kanak tidak terkawal, buka semua jika (selectAllCheckbox.Checked && checkedIndividualInputs <totalIndividualInputs) {
            selectallCheckbox.checked = false;
        } 
        // Jika semua kanak -kanak diperiksa, periksa semua yang lain jika (totalIndidualInputs === checkedIndividualInputs) {
            selectallCheckbox.checked = true;
        }
    });
});
</script>


<h3> Nota dan amalan terbaik</h3>
<ol>
<li> <strong>Penggunaan nama dan ID kelas yang munasabah:</strong> Dalam tutorial ini, kami menggunakan nama kelas (MyDiv, SelectAll) dan bukannya ID untuk mengenal pasti unsur -unsur, kerana nama kelas boleh digunakan untuk pelbagai elemen, yang sangat sesuai untuk senario di mana beberapa set "Pilih Semua" kotak semak disediakan. ID harus unik.</li>
<li> <strong>Kecekapan pemilih jQuery:</strong> Gabungan ibu bapa ('. Mydiv'). Cari (...) adalah cekap, yang pertama kali melihat ke atas elemen induk tertentu yang terdekat dan kemudian ke bawah ke elemen kanak -kanak, mengehadkan skop carian kepada kumpulan semasa, mengelakkan Dom Traversal yang tidak perlu.</li>
<li> <strong>prop () dan attr ():</strong> Untuk sifat boolean (seperti diperiksa, dipilih, dilumpuhkan), disarankan untuk menggunakan kaedah Prop () untuk menetapkan atau mendapatkan nilai mereka dan bukannya ATTR (). Prop () lebih tepat mencerminkan keadaan semasa elemen DOM.</li>
<li> <strong>Akses atribut DOM asli:</strong> dalam selectallCheckBox.Checked = false; atau selectallCheckbox.Checked = true;, kami terus mengakses harta yang diperiksa dari elemen DOM asli. Ini kerana $ (elemen) [0] boleh mendapatkan elemen dom asli pertama yang dibungkus oleh objek jQuery. Untuk membaca dan menulis sifat -sifat mudah, biasanya lebih ringkas untuk mengendalikan atribut DOM asli.</li>
<li> <strong>Kebolehbacaan Kod:</strong> Menggunakan nama pembolehubah yang bermakna (seperti isselected, $ parentdiv) dan anotasi yang sesuai dapat meningkatkan kebolehbacaan dan penyelenggaraan kod.</li>
<li> <strong>Situasi pengendalian/sempadan ralat:</strong> Untuk fungsi ini, kod di atas telah meliputi senario penggunaan biasa. Tetapi dalam aplikasi yang lebih kompleks, anda mungkin perlu mempertimbangkan kotak pilihan penambahan/penyingkiran dinamik, di mana anda mungkin perlu menafikan peristiwa atau menggunakan perwakilan acara.</li>
</ol>
<h3> Meringkaskan</h3>
<p> Melalui kaedah di atas, kami berjaya melaksanakan fungsi menguruskan kotak semak "Pilih Semua/Tidak Pilih Semua" dalam pelbagai bekas bebas menggunakan jQuery. Inti adalah untuk menentukan sempadan kumpulan melalui struktur HTML yang jelas, dan menggabungkan keupayaan pemprosesan DOM dan pemprosesan acara JQuery yang kuat untuk menentukan dengan tepat julat operasi dalam setiap kumpulan kotak semak bebas, dengan itu mencapai kawalan bebas tanpa gangguan. Corak ini sangat praktikal apabila membina bentuk kompleks atau antara muka penapisan data.</p>
</div></viv>
</div>
</div>
</div>
</div>
</div>
</div>
</div></yaya></tirly>