kotak berbilang pilih javascript untuk memilih beberapa

JavaScript ialah bahasa skrip yang digunakan secara meluas yang boleh digunakan untuk membuat halaman web dan aplikasi interaktif. Antaranya, kotak berbilang pilihan ialah elemen bentuk yang biasa digunakan dalam pembangunan web, membolehkan pengguna memilih satu atau lebih pilihan. Dalam artikel ini, kami akan meneroka cara memilih beberapa kotak pilihan menggunakan JavaScript.

1. Penggunaan asas kotak berbilang pilihan HTML

Untuk menentukan kotak berbilang pilihan dalam HTML, anda perlu menggunakan teg nilai atribut yang sepadan: nama, nilai dan diperiksa. Antaranya, atribut nama digunakan untuk menentukan nama kotak berbilang pilihan;

Sebagai contoh, kod berikut mencipta kotak berbilang pilihan bernama "buah-buahan" yang merangkumi tiga pilihan: epal, pisang dan oren, dengan epal sebagai pilihan lalai.

<form>
  <input type="checkbox" name="fruits" value="apple" checked>苹果<br>
  <input type="checkbox" name="fruits" value="banana">香蕉<br>
  <input type="checkbox" name="fruits" value="orange">橙子
</form>

Pengguna boleh menyemak atau menyahtanda pilihan dengan mengklik pada kotak pilihan. Apabila pengguna menyerahkan borang, pilihan yang dipilih diserahkan kepada pelayan sebagai data borang.

2. JavaScript melaksanakan berbilang kotak pilihan untuk memilih beberapa

Walaupun fungsi kotak berbilang pilihan yang disediakan oleh HTML adalah sangat mudah, kadangkala kita perlu mengendalikan pilihan yang dipilih pada klien, seperti Dapatkan bilangan item atau gelung yang dipilih melalui pilihan yang dipilih. Pada masa ini, kita boleh menggunakan JavaScript untuk mendapatkan bilangan kotak berbilang pilihan yang dipilih.

1. Dapatkan bilangan kotak pilihan berbilang yang dipilih

Untuk mendapatkan bilangan kotak pilihan berbilang yang dipilih, kita boleh menggunakan kaedah document.querySelectorAll() untuk mendapatkan semua pilihan berbilang elemen kotak pilihan dan mengira bilangannya. Kaedah ini mengembalikan senarai semua elemen yang sepadan dengan pemilih CSS yang ditentukan. Sebagai contoh, kod berikut memperoleh nombor yang dipilih dalam kotak berbilang pilihan bernama "buah-buahan":

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
const checkedCount = checkboxes.length;
console.log(`选中了 ${checkedCount} 个选项。`);

Dalam kod ini, baris pertama pertama memperoleh bilangan item yang dipilih dalam kotak berbilang pilihan bernama " fruits" melalui kaedah document.querySelectorAll(). Semua elemen yang dipilih dalam kotak pilihan dan simpannya dalam objek NodeList. Ambil perhatian bahawa pemilih CSS 'input[name="fruits"]:checked' digunakan untuk memadankan elemen kotak pilihan yang dipilih. Antaranya, atribut nama menentukan nama kotak berbilang pilihan untuk dipilih, dan kelas pseudo :checked boleh digunakan untuk memilih elemen yang dipilih.

Barisan kedua mengira bilangan kotak pilihan yang dipilih melalui kotak pilihan.panjang. Akhir sekali, gunakan kaedah console.log() untuk mengeluarkan keputusan.

2. Memproses kotak berbilang pilihan yang dipilih

Untuk memproses kotak berbilang pilihan yang dipilih, kita boleh menggunakan kod yang serupa dengan di atas untuk mendapatkan kotak berbilang pilihan yang dipilih element , dan kemudian gunakan gelung untuk melintasi setiap elemen yang dipilih dan melakukan operasi yang sepadan di dalamnya.

Sebagai contoh, kod berikut berulang melalui elemen yang dipilih dalam kotak pilihan, menambahkan nilainya pada rentetan:

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
let values = '';
checkboxes.forEach(checkbox => {
  values += checkbox.value + ',';
});
console.log(`选中的选项是：${values}`);

Kod mula-mula mendapat senarai elemen kotak pilihan yang dipilih, Kemudian gunakan kaedah forEach() untuk menggelungkan setiap elemen yang dipilih. Dalam badan gelung, tambahkan nilai elemen semasa kepada pembolehubah nilai dan keluarkan hasilnya pada penghujungnya.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan penggunaan asas kotak berbilang pilihan HTML dan menggunakan JavaScript untuk melaksanakan fungsi memilih beberapa kotak berbilang pilihan. Dengan mendapatkan bilangan kotak berbilang pilihan yang dipilih dan memproses elemen kotak berbilang pilihan yang dipilih, kami memperluaskan kefungsian kotak berbilang pilihan dan menyediakan asas untuk melaksanakan interaksi bentuk yang kompleks. Saya harap artikel ini akan membantu pembangun web belajar dan menggunakan JavaScript untuk mengendalikan kotak berbilang pilihan.

Atas ialah kandungan terperinci kotak berbilang pilih javascript untuk memilih beberapa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!