jQuery实现checkbox的简单操作
这篇文章主要介绍了jQuery实现checkbox的简单操作,对复选框组的全选、全不选、不全选,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章
对复选框组的全选、全不选、不全选,获取选中的复选框的值的操作
1.点击全选按钮,复选框组全部选中或者全部取消。
2.实现全选按钮和复选框组的联动,当复选框组中有一个没有被选中后,那么id=‘checkedAll'的全选按钮应该要取消选中;当复选框组全部选中后,全选按钮也应该被选中。
3.获取已选中的复选框的值。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对复选框组的全选操作</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ /*全选 全选cheched和下方的checkbox按钮的checked是一致的, 故可用this.checked。 注意:$(this).checked是错的 */ $('#checkedAll').click(function() { $('[name=item]:checkbox').prop('checked', this.checked); }); /*判断复选框的总数,是否和选中的复选框的数量相等 相等:全选了 不相等:没有全选 */ $('[name=item]:checkbox').click(function() { /*得到的是ul下 name=item 的复选框数组*/ var $checkedArray = $('[name=item]:checkbox'); /*$checkedArray.filter(':checked') -----> 已经选择的复选框 */ $('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length); }); }); </script> <script type="text/javascript"> $(function () { //获取已选的复选框的值 var checkedArray = new Array();//放已经选择的checkbox的value var count;//已经选择的个数 $('#btn_submit').click(function() { checkedArray.length=0; count=0; $('[name=item]:checkbox:checked').each(function() { checkedArray.push($(this).val()); count++; }); if (checkedArray.length==0) { alert("Please check one at least."); return; } confirm("已选复选框的值:"+checkedArray+"\n"+"选中的复选框个数:"+count); }); }) </script> </head> <body> <form action="#" method="POST"> <input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label> <ul> <li><input type="checkbox" name="item" value="basketball">篮球</li> <li><input type="checkbox" name="item" value="football">足球</li> <li><input type="checkbox" name="item" value="badminton">羽毛球</li> <li><input type="checkbox" name="item" value="pingpong">兵乓球</li> <li><input type="checkbox" name="item" value="swimming">游泳</li> <li><input type="checkbox" name="item" value="running">跑步</li> </ul> <button type="button" id="btn_submit" value="提交button">提交</button> </form> </body> </html>
对于代码中的不足,不够简洁的还可以再优化的地方,如果有什么更好的想法和实现方法,欢迎一起交流学习。
相关推荐:
Atas ialah kandungan terperinci jQuery实现checkbox的简单操作. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Langkah pengendalian dan langkah berjaga-jaga LinuxDeploy LinuxDeploy ialah alat berkuasa yang boleh membantu pengguna menggunakan pelbagai pengedaran Linux dengan pantas pada peranti Android, membolehkan pengguna mengalami sistem Linux yang lengkap pada peranti mudah alih mereka. Artikel ini akan memperkenalkan langkah pengendalian dan langkah berjaga-jaga LinuxDeploy secara terperinci dan memberikan contoh kod khusus untuk membantu pembaca menggunakan alat ini dengan lebih baik. Langkah-langkah operasi: Pasang LinuxDeploy: Pertama, pasang

Dengan populariti telefon pintar, fungsi tangkapan skrin telah menjadi salah satu kemahiran penting untuk kegunaan harian telefon bimbit. Sebagai salah satu telefon mudah alih utama Huawei, fungsi tangkapan skrin Huawei Mate60Pro secara semula jadi telah menarik banyak perhatian daripada pengguna. Hari ini, kami akan berkongsi langkah operasi tangkapan skrin telefon mudah alih Huawei Mate60Pro, supaya semua orang boleh mengambil tangkapan skrin dengan lebih mudah. Pertama sekali, telefon bimbit Huawei Mate60Pro menyediakan pelbagai kaedah tangkapan skrin, dan anda boleh memilih kaedah yang sesuai dengan anda mengikut tabiat peribadi anda. Berikut ialah pengenalan terperinci kepada beberapa pemintasan yang biasa digunakan:

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u

Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <

Ele.me ialah perisian yang menghimpunkan pelbagai makanan istimewa yang berbeza Anda boleh memilih dan membuat pesanan secara dalam talian kaedah operasi , ingat untuk menyemak laman web PHP Cina. Arahan tentang cara mengikat WeChat ke Ele.me: 1. Mula-mula buka perisian Ele.me, dan selepas memasuki halaman utama, kita klik [My] di sudut kanan bawah 2. Kemudian di halaman Saya, kita perlu klik [Akaun] di penjuru kiri sebelah atas; yang perlu diikat dalam halaman kebenaran WeChat dan klik Hanya [Benarkan];

Operasi Rentetan PHP: Kaedah Praktikal untuk Mengalih Keluar Ruang Secara Berkesan Dalam pembangunan PHP, kita sering menghadapi situasi di mana kita perlu mengalih keluar ruang daripada rentetan. Mengalih keluar ruang boleh menjadikan rentetan lebih bersih dan memudahkan pemprosesan dan paparan data seterusnya. Artikel ini akan memperkenalkan beberapa kaedah yang berkesan dan praktikal untuk mengalih keluar ruang, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan fungsi PHP terbina dalam trim() fungsi terbina dalam PHP boleh mengalih keluar ruang pada kedua-dua hujung rentetan (termasuk ruang, tab, baris baharu, dsb.), yang sangat mudah dan mudah. untuk menggunakan.

Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:

Jadual Kandungan Prinsip Staking Astar Dapp Staking Hasil Pembongkaran Projek Airdrop Berpotensi: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap Staking Strategi & Operasi "AstarDapp Staking" telah dinaik taraf kepada versi V3 pada awal tahun ini, dan banyak pelarasan telah dibuat pada staking peraturan. Pada masa ini, kitaran pertaruhan pertama telah tamat, dan kitaran kecil "pengundian" kitaran pertaruhan kedua baru sahaja bermula. Untuk mendapatkan faedah "ganjaran tambahan", anda perlu memahami peringkat kritikal ini (dijangka akan berlangsung sehingga 26 Jun, berbaki kurang daripada 5 hari). Saya akan memecahkan pendapatan pertaruhan Astar secara terperinci,
