JQuery mengira bilangan kotak semak yang diperiksa

Gunakan jQuery untuk mengira bilangan kotak semak dalam jadual

Berikut adalah coretan kod jQuery yang mudah untuk mengira bilangan kotak semak yang dipilih dalam jadual:

<code class="language-javascript">$('#table :input[type="checkbox"]:checked').length</code>

Kotak Kotak Kotak Statistik JQuery Soalan Lazim

Bagaimana untuk mengira bilangan kotak semak dengan JavaScript tulen?

Walaupun JQuery menyediakan cara yang mudah dan cekap untuk mengira bilangan kotak semak, anda juga boleh menggunakan JavaScript tulen untuk melaksanakan fungsi ini. Anda boleh menggunakan kaedah

untuk memilih semua kotak semak dan kemudian gunakan kaedah querySelectorAll untuk menyaring kotak semak yang dipilih. Berikut adalah contoh mudah: Array.prototype.filter

<code class="language-javascript">let checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checked = Array.from(checkboxes).filter(input => input.checked);
console.log(checked.length);</code>

Kod ini akan merakam bilangan kotak semak yang dipilih ke konsol.

Bagaimana untuk mengira bilangan kotak semak dalam masa nyata?

Ya, anda boleh menggunakan acara JQuery's

untuk mengira bilangan kotak semak dalam masa nyata. Acara ini dicetuskan apabila status kotak semak berubah. Anda boleh menggunakan acara ini untuk mengemas kini kiraan apabila kotak semak dipilih atau tidak dicentang. Berikut adalah contoh: .change()

<code class="language-javascript">$('input[type="checkbox"]').change(function() {
  let count = $('input[type="checkbox"]:checked').length;
  console.log(count);
});</code>

Kod ini merekodkan bilangan kotak semak yang dipilih sekarang ke konsol apabila kotak semak dipilih atau tidak terkawal.

Bagaimana untuk memaparkan bilangan kotak semak di halaman saya?

anda boleh memaparkan bilangan kotak semak yang dipilih pada laman web dengan mengemas kini kandungan teks elemen HTML. Berikut adalah contoh:

<code class="language-javascript">$('input[type="checkbox"]').change(function() {
  let count = $('input[type="checkbox"]:checked').length;
  $('#count').text(count);
});</code>

Dalam contoh ini,

adalah id elemen HTML yang akan dipaparkan untuk dihitung. #count

Bagaimana untuk mengira bilangan kotak semak yang dipilih dalam kumpulan tertentu?

Ya, anda boleh menggunakan pemilih yang lebih spesifik untuk mengira bilangan kotak semak yang dipilih dalam kumpulan tertentu. Sebagai contoh, jika kotak semak anda berada di dalam div dengan id

, anda boleh mengira bilangan kotak semak yang dipilih dalam kumpulan seperti ini: group1

<code class="language-javascript">$('div#group1 input[type="checkbox"]').change(function() {
  let count = $('div#group1 input[type="checkbox"]:checked').length;
  console.log(count);
});</code>

Kod ini akan merakam bilangan kotak semak yang dipilih dalam

ke konsol. group1

Bagaimana untuk mengira bilangan kotak semak yang tidak terkawal?

anda boleh menggunakan pemilih

untuk mengira bilangan kotak semak yang tidak terkawal. Berikut adalah contoh: :not(:checked)

<code class="language-javascript">let count = $('input[type="checkbox"]:not(:checked)').length;
console.log(count);</code>

Kod ini akan merakam bilangan kotak semak yang tidak terkawal ke konsol.

Atas ialah kandungan terperinci JQuery mengira bilangan kotak semak yang diperiksa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!