Bagaimana untuk mengawal paparan dan menyembunyikan kotak semak dengan Jquery

Apabila menulis halaman web, kami sering menggunakan kotak semak untuk operasi berbilang pilihan, tetapi kadangkala kami perlu menyembunyikan pilihan tertentu dan hanya memaparkannya apabila pilihan lain dipilih. Pada masa ini, anda perlu menggunakan fungsi penyembunyian kotak semak Jquery.

Jquery ialah perpustakaan Javascript yang menyediakan banyak fungsi dan kaedah yang memudahkan operasi Javascript. Antaranya ialah kaedah untuk mengendalikan kotak semak Anda boleh menyembunyikan dan memaparkan kotak semak dengan mudah melalui Jquery.

Terdapat dua cara utama untuk menyembunyikan kotak semak: satu ialah menggunakan gaya CSS untuk menyembunyikan kotak semak, dan satu lagi ialah menggunakan fungsi Jquery untuk mengawal paparan dan menyembunyikan kotak semak. Di bawah ini kami akan memperkenalkan pelaksanaan khusus kedua-dua kaedah ini masing-masing.

Sembunyikan kotak pilihan menggunakan gaya CSS:

Dalam halaman HTML, kita boleh menambah gaya CSS pada kotak pilihan untuk disembunyikan supaya ia tidak dipaparkan. Khususnya, kita boleh menetapkan atribut paparan kotak semak kepada tiada, seperti yang ditunjukkan di bawah:

<input type="checkbox" id="checkbox1" style="display:none;">

Perlu diambil perhatian bahawa kaedah ini hanya menyembunyikan penampilan kotak semak, tetapi kompleks Kotak semak masih wujud dan masih boleh disemak atau dinyahtanda. Jika anda perlu mengawal keadaan sebenar kotak semak, seperti melumpuhkan atau mendayakan kotak semak, anda masih perlu menggunakan fungsi Jquery.

Gunakan fungsi Jquery untuk menyembunyikan kotak semak:

Jquery menyediakan banyak fungsi operasi untuk kotak semak, yang boleh menyembunyikan dan memaparkan kotak semak dengan mudah. Fungsi yang paling biasa digunakan ialah hide() dan show(). Fungsi

hide() digunakan untuk menyembunyikan elemen yang dipilih Ia boleh menerima parameter untuk menentukan kesan animasi tersembunyi dan kelajuan elemen. Fungsi show() adalah bertentangan dengan fungsi hide() dan digunakan untuk memaparkan elemen yang dipilih.

Berikut ialah contoh kod yang menunjukkan cara menggunakan fungsi Jquery untuk menyembunyikan dan menunjukkan kotak pilihan:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('#checkbox1').change(function(){
        if(this.checked){
            $('#hidden_checkbox').show();
        }
        else{
            $('#hidden_checkbox').hide();
        }
    });
});
</script>

<input type="checkbox" id="checkbox1">
<input type="checkbox" id="hidden_checkbox" style="display:none;">

Dalam kod di atas, kami mempunyai kotak pilihan utama (kotak semak id1) Perubahan yang ditambah pendengar acara. Apabila kotak semak dipilih, Jquery akan memaparkan kotak semak tersembunyi (id is hidden_checkbox Apabila kotak semak dinyahtanda, Jquery akan menyembunyikan kotak semak tersembunyi sekali lagi).

Perlu diambil perhatian bahawa apabila menggunakan Jquery untuk menyembunyikan kotak pilihan, kami tidak mengesyorkan menggunakan gaya CSS untuk menyembunyikan kotak pilihan. Ini kerana, apabila menggunakan gaya CSS untuk menyembunyikan kotak pilihan, walaupun kotak pilihan disembunyikan, ia masih akan mengambil bahagian dalam penyerahan borang, yang akan menyebabkan beberapa masalah yang tidak perlu. Sebaliknya, menggunakan fungsi Jquery untuk mengawal paparan dan menyembunyikan kotak semak adalah lebih intuitif dan mudah, dan selaras dengan prinsip pengoptimuman kod.

Ringkasnya, fungsi penyembunyian kotak pilihan Jquery ialah fungsi yang sangat praktikal dalam pembangunan web. Semasa menulis halaman web, kita boleh memilih kaedah yang sesuai untuk menyembunyikan dan memaparkan kotak semak berdasarkan keperluan sebenar. Jika anda ingin mengetahui lebih lanjut tentang kaedah operasi Jquery, anda juga boleh pergi ke dokumentasi rasmi untuk mencari kandungan yang berkaitan.

Atas ialah kandungan terperinci Bagaimana untuk mengawal paparan dan menyembunyikan kotak semak dengan Jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!