Jquery gagal memadamkan kotak pilihan

Dalam pembangunan bahagian hadapan, selalunya perlu melakukan operasi berkaitan pada kotak semak, seperti memilih atau membatalkan pilihan tertentu atau memadamkan pilihan tertentu. Kotak semak boleh dimanipulasi dengan lebih mudah menggunakan kaedah prop() JQuery. Walau bagaimanapun, dalam operasi sebenar, sesetengah pembangun akan menghadapi situasi di mana kotak semak tidak dapat dipadamkan dengan jayanya. Bahagian berikut akan meneroka punca masalah ini dan cara menyelesaikannya.

Analisis sebab

Rujuk pengenalan kaedah prop() dalam dokumentasi rasmi JQuery Kita boleh tahu bahawa kaedah ini boleh mengubah suai atau mengembalikan nilai atribut elemen yang dipilih. Antaranya, memadamkan atribut elemen memerlukan menetapkan nilai atributnya kepada undefined atau null. Ini juga dinyatakan dengan jelas dalam dokumentasi. Kemudian, apabila memadamkan kotak pilihan, kami boleh mempertimbangkan untuk menetapkan nilai atributnya kepada tidak ditentukan atau nol.

Tetapi sebenarnya, operasi ini sebenarnya tidak memadamkan kotak pilihan. Walaupun kami menetapkan statusnya kepada palsu, operasi pemadaman ini akan gagal. Sebabnya ialah elemen tidak boleh dipadamkan terus menggunakan kaedah prop(), kerana kaedah ini hanya boleh menetapkan atau mengembalikan nilai atribut elemen, tetapi tidak boleh memadamkan elemen dalam dokumen.

Jadi, bagaimanakah anda mengalih keluar kotak pilihan dalam amalan? Seterusnya kami akan memperkenalkan beberapa kaedah pelaksanaan.

Kaedah pelaksanaan

Gunakan kaedah remove()

Seperti yang dinyatakan di atas, elemen kotak semak tidak boleh dipadamkan terus menggunakan kaedah prop(). Oleh itu, kita perlu menggunakan kaedah lain untuk mengalih keluar kotak pilihan. Kaedah yang paling biasa ialah menggunakan kaedah remove(). Kaedah ini memadam sepenuhnya elemen yang dipilih.

$('input[name="checkboxName"]').remove();

Kod di atas akan menemui semua kotak pilihan bernama "checkboxName" pada halaman dan memadamkannya. Walau bagaimanapun, kaedah ini hanya mengalih keluar kotak semak itu sendiri, bukan kandungan atau rujukannya. Jika anda perlu memadamkan kod atau gaya kotak pilihan yang berkaitan, anda juga perlu memadamkannya secara manual.

Gunakan kaedah empty()

Kaedah biasa yang lain ialah menggunakan kaedah empty(). Kaedah ini akan memadamkan semua elemen anak bagi elemen yang dipilih. Apabila memadamkan kotak pilihan, kami boleh menggunakan kaedah ini untuk memadamkan elemen anak bekas induk di mana kotak pilihan itu berada.

$('div.checkboxContainer').empty();

Kod di atas akan memadamkan semua elemen anak dalam elemen div, tetapi bukan elemen div itu sendiri. Jadi jika anda mempunyai elemen lain yang bersarang dalam div, pendekatan ini mungkin tidak mengalih keluar semua elemen yang berkaitan.

Menggunakan kaedah detach()

Kaedah detach() sangat serupa dengan kaedah remove(), tetapi ia tidak memadamkan elemen itu sendiri, tetapi hanya tanggalkannya daripada dokumen. Ini bermakna jika anda perlu memulihkan elemen yang dipadamkan, anda boleh menggunakan kaedah attach() untuk menambahkannya semula pada dokumen.

$('input[name="checkboxName"]').detach();

Kod di atas akan memisahkan kotak pilihan yang dipilih daripada dokumen. Jika kita perlu merujuk kotak pilihan sekali lagi, kita boleh menggunakan kod berikut:

var checkboxClone = $('input[name="checkboxName"]').clone();
$('div.checkboxContainer').append(checkboxClone);

Kod di atas akan mengklon kotak pilihan yang dipisahkan dan menambahkannya pada bekas div.

Ringkasan

Memanipulasi kotak pilihan tidak dapat dielakkan semasa pembangunan. Menggunakan kaedah prop() JQuery boleh memanipulasi nilai harta kotak semak dengan mudah, tetapi ia tidak boleh memadamkan elemen sepenuhnya. Oleh itu, apabila memadam kotak semak, kita perlu menggunakan kaedah seperti remove(), empty() atau detach(). Walau bagaimanapun, kaedah ini juga mempunyai had dan hadnya sendiri. Memilih pendekatan yang paling sesuai memerlukan keputusan berdasarkan keperluan perniagaan tertentu.

Atas ialah kandungan terperinci Jquery gagal memadamkan kotak pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!