Pemilihan penuh dan pemilihan songsang dilaksanakan oleh jquery

Dengan penambahbaikan berterusan fungsi laman web, aplikasi kotak semak menjadi semakin meluas. Apabila terdapat sejumlah besar kotak semak, fungsi memilih semua atau menyongsangkan pemilihan akan menjadi sangat mudah untuk pengguna beroperasi. Pustaka JQuery menyediakan API yang sepadan untuk melaksanakan fungsi ini dengan mudah.

1. Pelaksanaan fungsi Pilih Semua

Fungsi Pilih Semua merujuk kepada operasi pengguna yang membolehkan anda memilih semua kotak semak dan menukar keadaan yang dipilih kepada keadaan yang dipilih. Kod untuk jQuery untuk melaksanakan semua pemilihan adalah seperti berikut:

 $("#checkAll").click(function () {
        $('input[type="checkbox"]').prop('checked', this.checked);
 });

Dalam kod di atas, simbol $ mewakili pemilihan elemen tertentu Apabila mengklik elemen dengan id checkAll, status semak ditetapkan untuk semua elemen yang jenis inputnya adalah kotak semak Dipilih, iaitu keadaan ini.ditandakan.

2. Pelaksanaan fungsi pilihan songsang

Fungsi pilihan songsang bermakna pengguna boleh memilih semua kotak semak yang tidak dipilih dan kotak semak yang dipilih menjadi tidak dipilih. Kod jQuery untuk pemilihan terbalik adalah seperti berikut:

 $("#reverseSelect").click(function () {
        $('input[type="checkbox"]').each(function () {
            this.checked = !this.checked;
        });
 });

Dalam kod di atas, simbol $ memilih elemen dengan id reverseSelect Apabila diklik, ia merentasi setiap elemen dengan kotak semak jenis input dan menyongsangkan semakannya status. Jika ia pada asalnya dipilih, ia menjadi tidak dipilih jika tidak, ia menjadi dipilih.

3. Pelaksanaan fungsi komprehensif memilih semua dan menyongsangkan pemilihan

Jika anda perlu merealisasikan kedua-dua fungsi memilih semua dan menyongsangkan pemilihan pada masa yang sama, anda boleh mengubah suai kod untuk mencapai yang berikut:

$("#checkAll").click(function () {
        $('input[type="checkbox"]').prop('checked', this.checked);
 });
$("#reverseSelect").click(function () {
        $('input[type="checkbox"]').each(function () {
            this.checked = !this.checked;
        });
 });

Di atas Dalam kod, dua fungsi terikat pada butang dengan id checkAll dan reverseSelect masing-masing. Kedua-dua butang ini sepadan dengan fungsi memilih semua dan menyongsangkan pemilihan masing-masing.

Secara amnya, fungsi pemilihan pilih semua dan songsang yang disediakan oleh jQuery boleh meningkatkan kemudahan operasi pengguna. Pelaksanaan ini mudah, mudah digunakan dan boleh digunakan pada pelbagai jenis tapak web.

Atas ialah kandungan terperinci Pemilihan penuh dan pemilihan songsang dilaksanakan oleh jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!