Rumah >hujung hadapan web >tutorial js >Jquery melaksanakan kotak semak kaedah pemilihan penuh_jquery

Jquery melaksanakan kotak semak kaedah pemilihan penuh_jquery

WBOY
WBOYasal
2016-05-16 16:17:471072semak imbas

Pagi semalam saya menulis tentang cara menggunakan Jquery untuk memilih semua

Berdasarkan pendapat semua orang, saya telah mengubah suai beberapa aspek penulisan yang kurang baik dalam program Ini kerana tahap saya terhad dan terdapat pelbagai perkara yang tidak dapat saya pertimbangkan.

Pada akhir artikel, saya menimbulkan soalan, dan saya ingin menulis kaedah universal untuk memanggilnya, jadi saya datang dengan artikel ini Apabila saya pulang ke rumah pada waktu malam, saya menulis kesannya

Contoh di bawah adalah untuk dibincangkan dan dipelajari oleh semua orang. Jika anda fikir ia bagus, anda juga boleh menerapkannya secara langsung pada projek.

1: Mengapa menulis kaedah ini

Terdapat banyak kaedah dalam talian untuk memilih semua dan tiada dalam satu ayat, tetapi semuanya nampaknya telah terlepas pandang satu masalah Kotak pilihan yang memilih semua boleh mengawal sub-kotak di bawah, tetapi sub-kotak di bawah juga sepatutnya boleh untuk mengawal pilih semua di atas Dengan cara ini Ini adalah kaedah saya.

2: Proses pembangunan: Untuk mencapai kesejagatan, kita perlu menyelesaikan dua masalah, cara mengelompokkan, dan cara menilai kotak semak yang mana dalam kumpulan adalah untuk memilih semua dan berpendapat bahawa pengelompokan mengikut nama boleh digunakan ,

Gunakan kelas untuk menentukan sama ada ia adalah kumpulan kotak pilihan yang perlu dipilih sepenuhnya. Mula-mula cari semua kelas yang perlu dipilih, dan kemudian cari atribut nama Anda boleh mencari sub-kotak pilihan berdasarkan atribut nama Selagi anda menemui elemen, anda boleh mengendalikan

3: Fail, berikut ialah js yang saya laksanakan, disimpan sebagai xs_checkbox_all.js

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi () {
var xsChk = "xsChk";//Gaya yang ditentukan
var xsChkAll = "input[type='checkbox'][class='" xsChk "'][name]";//Semua kotak pilihan yang mentakrifkan gaya ini
$(xsChkAll).setiap(fungsi () {
        var name = $(this).attr("name");
           name = "input[type='checkbox'][class!='" xsChk "'][name='" name "']";//Kotak kecil di bawah kotak semua pilihan ini
           $(ini).klik(fungsi () {
                $(name).attr("checked", $(this)[0].checked);
})
        var xschk = $(this);
$(nama).klik(fungsi () {
               var IAll = $(name).length; //Nombor semua kotak pilihan di bawah subprojek ini
               var IChk = $(name ":checked").length; //Nombor semua kotak pilihan yang ditandai di bawah sub-projek ini
            var isAllChecked = benar; //Sama ada semuanya dipilih
Jika (IAll != IChk) {
                     isAllChecked = palsu;
            }
                $(xschk).attr("checked", isAllChecked);
});
});
});

Penggunaan halaman

Salin kod Kod adalah seperti berikut:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">

   


   
   

        全选one
       
        全选
   

       
        1

       
        2

       
        3

       
        4

   

   

   

        全选two
       
        全选2
   

       
        11

       
        22

       
        33

       
        44

   

   



可以达到效果,如果有什么优化的地方,请大家提出,我会做的更好,谢谢中的家提出全部内容了,希望大家能够喜欢。

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn