Nyahtanda semua kotak semak jquery-Soal Jawab bahagian hadapan-php.cn

Nyahtanda semua kotak semak jquery

WBOY

Lepaskan： 2023-05-25 10:16:37

asal

532 orang telah melayarinya

Nyahtanda semua kotak pilihan jQuery

Dalam membangunkan halaman web, kotak semak sering digunakan Fungsi kotak semak adalah untuk membolehkan pengguna memilih satu atau lebih pilihan. Biasanya, kami akan menyediakan butang "Pilih Semua" supaya pengguna boleh memilih semua pilihan sekaligus, tetapi kadangkala, kami juga perlu menyediakan butang "Nyahpilih Semua" supaya pengguna boleh membatalkan semua pilihan sekaligus.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk merealisasikan fungsi nyahpilih kotak pilihan.

Kod HTML

Mari kita lihat kod HTML dahulu, yang mengandungi tiga kotak semak dan dua butang: pilih semua dan nyahpilih semua.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery复选框全不选</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h2>请选择你喜欢的水果：</h2>
    <input type="checkbox" name="fruit" value="apple">苹果<br>
    <input type="checkbox" name="fruit" value="banana">香蕉<br>
    <input type="checkbox" name="fruit" value="orange">橙子<br>
    <br>
    <button id="btnCheckAll">全选</button>
    <button id="btnCheckNone">全不选</button>
</body>
</html>

Salin selepas log masuk

kod jQuery

Seterusnya, kami menggunakan jQuery untuk melengkapkan fungsi nyahpilih. Mula-mula, kita perlu mendapatkan semua kotak semak, kemudian lelaran melalui kotak semak ini dan tetapkan atribut "disemak" mereka kepada palsu secara bergilir.

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

Salin selepas log masuk

Dalam kod di atas, kami mula-mula menggunakan pemilih jQuery untuk mendapatkan semua kotak semak, dan kemudian gunakan kaedah "setiap" untuk melelaran melalui kotak semak ini. Semasa proses traversal, kami menggunakan kaedah "prop" untuk menetapkan atribut "disemak" mereka kepada palsu, supaya fungsi tidak memilih semua boleh dicapai.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk merealisasikan fungsi nyahpilih kotak semak. Dengan menetapkan atribut "ditandai" semua kotak pilihan kepada palsu, kami boleh membatalkan semua pilihan sekaligus, memberikan pengalaman pengguna yang lebih mudah. Kod ini mudah dan mudah difahami dan boleh digunakan dengan mudah untuk pembangunan sebenar.

Atas ialah kandungan terperinci Nyahtanda semua kotak semak jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!