Cara menggunakan JavaScript dalam label

Buat kotak pilihan dalam

dan kawal keadaan pilihannya

Dengan pembangunan berterusan pembangunan bahagian hadapan, JavaScript telah menjadi bahasa skrip yang sangat diperlukan, yang boleh merealisasikan interaksi halaman, kesan dinamik dan Pengesahan dan fungsi lain. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membuat kotak pilihan dalam label dan mengawal keadaan pilihannya.

1. Buat kotak semak

1 Gunakan teg input untuk membuat kotak semak

Intipati kotak semak ialah elemen bentuk jenis input gunakan teg Sudah tentu, kita juga perlu menetapkan atribut id dan atribut nilai untuk kotak semak.

Contohnya:

Dengan cara ini, kami mencipta kotak pilihan A dengan id "kotak semak1" dan nilai "kotak semak1".

2. Gunakan tag label untuk mengaitkan kotak semak

Untuk memudahkan operasi, kami boleh mengaitkan kotak semak dengan tag label. Dengan cara ini, apabila pengguna mengklik pada label label, kotak semak yang sepadan akan dipilih secara automatik.

Untuk mengaitkan kotak semak dengan label label, anda hanya perlu menggunakan atribut for dalam label label dan menetapkannya kepada nilai id kotak semak yang sepadan.

Contohnya:

checkbox1

Dengan cara ini, apabila pengguna mengklik label "Kotak Semak 1", kotak pilihan yang sepadan akan dipilih secara automatik.

2. Kawal keadaan kotak semak yang dipilih

Sekarang, kami telah mencipta kotak semak dan mengaitkannya dengan tag label. Seterusnya, kita boleh menggunakan JavaScript untuk mengawal keadaan kotak pilihan yang dipilih.

1 Dapatkan kotak semak

Kita boleh menggunakan kaedah getElementById untuk mendapatkan elemen DOM kotak semak. Contohnya:

var checkbox1 = document.getElementById("checkbox1");

Dengan cara ini, kami memperoleh elemen DOM kotak semak dengan id "checkbox1".

2. Tetapkan keadaan kotak semak yang ditandai

Untuk menetapkan keadaan kotak semak yang ditandai, kita boleh menggunakan atribut yang ditandakan. Jika nilai atribut ini adalah benar, ini bermakna kotak semak dipilih jika nilai atribut ini adalah palsu, ini bermakna kotak semak tidak dipilih.

Contohnya:

kotak pilihan1.ditandakan = benar; // Tandai kotak pilihan
kotak pilihan1.ditandakan = palsu; // Nyahtanda kotak pilihan

3 perubahan dalam kotak semak

Jika kita ingin melakukan beberapa operasi apabila status kotak semak berubah, kita boleh melakukannya dengan mendengar peristiwa perubahan kotak semak.

Contohnya:

kotak semak1.addEventListener("change", function() {
if (this.checked) {

console.log("复选框被选中了");

} else {

console.log("复选框被取消了选中状态");

}
});

Dengan cara ini, apabila status kotak semak berubah, peristiwa perubahan akan dicetuskan dan operasi yang sepadan akan dilakukan.

3. Gunakan JavaScript untuk membuat berbilang kotak semak

Jika kita perlu mencipta berbilang kotak semak, kita boleh menciptanya secara dinamik melalui JavaScript dan kemudian menambahkannya ke halaman.

Contohnya:

var checkboxWrapper = document.getElementById("checkboxWrapper"); // Dapatkan elemen bekas
untuk (var i = 1; i <= 5; i++ ) {
kotak semak var = document.createElement("input"); // Cipta elemen input
checkbox.type = "checkbox"; // Tetapkan jenis input ke kotak semak
checkbox.id = "checkbox"; + i; // Set id
checkbox.value = "checkbox" + i; // Set value
var label = document.createElement("label"); // Cipta elemen label
label .setAttribute ("for", "checkbox" + i); // Kaitkan label dengan checkbox
label.innerHTML = "checkbox" + i; // Set label text
checkboxWrapper.appendChild( // Add the kotak semak pada bekas
kotak semakWrapper.appendChild(label); // Tambahkan label pada bekas
}

Dengan cara ini, kami mencipta 5 kotak semak secara dinamik dan menambahkannya pada elemen bekas dengan id "checkboxWrapper".

Ringkasan

Menggunakan JavaScript, anda boleh membuat kotak semak dengan mudah dalam teg label dan mengawal keadaannya yang ditanda melalui atribut yang ditanda dan acara perubahan. Pada masa yang sama, kami juga boleh menggunakan JavaScript untuk mencipta berbilang kotak semak secara dinamik untuk mencapai fungsi yang lebih fleksibel.

Atas ialah kandungan terperinci Cara menggunakan JavaScript dalam label. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!