Rumah > Artikel > hujung hadapan web > Nyahtanda semua kotak semak jquery
Nyahtanda semua kotak semak jquery
- WBOYasal
- 2023-05-25 10:16:37548semak imbas
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>- 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);
});
});
});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!