Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan pemilihan penuh dengan jquery
Bagaimana untuk mencapai kesan pemilihan penuh dengan jquery
- 藏色散人asal
- 2021-11-12 10:26:275112semak imbas
Cara mencapai kesan pilih-semua dengan jquery: 1. Buat fail sampel HTML 2. Tentukan kotak pilih-semua semasa melalui "$('input').click(function(){ ...}" kaedah Pilih sahaja atau tidak
Persekitaran pengendalian artikel ini: sistem Windows 7, versi jquery 3.2.1, komputer DELL G3
Bagaimana untuk melaksanakan jquery
jQuery mencapai semua kesan pemilihan
Ini adalah sebahagian daripada? kod yang menggunakan jquery untuk mencapai semua pemilihan Idea utama adalah seperti berikut:
1 Semua kotak semak mempunyai peristiwa klik, dan semua kesan dilaksanakan di bawah peristiwa klik
2. Fungsi yang dilaksanakan. dengan memilih semua kotak semak adalah sama seperti yang dilaksanakan oleh pilihan semak lain Berbeza, semua membuat pertimbangan dalam acara klik, sama ada ia adalah peristiwa klik pada kotak semak yang dipilih semua
3 , laksanakan penghakiman sama ada kotak semak semua yang dipilih dipilih, jika keadaan semasa dipilih , kemudian klik untuk menyahtanda dan nyahtanda semua pilihan pada masa yang sama Jika Pilih Semua tidak ditandakan pada masa ini, klik untuk menyemak dan tandakan semua
4 Jika tidak, ini bermakna objek yang diklik adalah daripada semua Jika anda memilih pilihan lain, maka anda perlu menilai sama ada bilangan pilihan yang sedang diperiksa adalah sama dengan bilangan semua pilihan kecuali Pilih Semua. kotak semak. Jika sama, ini bermakna semua pilihan ditandakan, dan kotak semak Pilih Semua akan dipilih pada masa yang sama, jika tidak, ia tidak ditandakan berikut ialah kod saya
Terdapat banyak idea untuk mencapai kesan pemilihan Berbanding dengan idea memisahkan dua peristiwa klik, ia agak sukar untuk difahami, tetapi sebenarnya kod untuk. mencapai kesannya adalah sama. Pembelajaran yang disyorkan: "<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').click(function(){
if($(this).index() == 0){
//判断当前全选框是否选中，如果选中则全选，否则全不选
if($('input').eq(0).prop('checked')){
$(this).nextAll().prop('checked',true);
}else{
$(this).nextAll().prop('checked',false);
}
}else{
//判断除了全选之外的选项是否全部选中，选中则勾上全选，否则全不选
if($('input:gt(0):checked').length == $('input').length-1){
$('input').eq(0).prop('checked',true)
}else{
$('input').eq(0).prop('checked',false)
}
}
})
})
</script>
</head>
<body>
<input type="checkbox" />全选
<input type="checkbox" />语文
<input type="checkbox" />数学
<input type="checkbox" />英语
</body>
</html>tutorial video jquery"
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan pemilihan penuh dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!