Bagaimana untuk melaksanakan fungsi pemilihan berbilang bentuk dalam JavaScript?

Bagaimana untuk melaksanakan fungsi pemilihan berbilang borang dalam JavaScript?

Borang ialah elemen biasa dalam halaman web, digunakan untuk mengumpul maklumat input pengguna. Dalam borang, kami selalunya perlu menyediakan berbilang pilihan pilihan, seperti kotak pilihan atau senarai berbilang pilihan. JavaScript ialah bahasa pengaturcaraan yang digunakan untuk menambah fungsi interaktif pada halaman web Ia boleh digunakan untuk melaksanakan pelbagai fungsi pemilihan dalam bentuk.

Sebelum kita bermula, mari kita fahami dahulu apakah unsur-unsur biasa dalam pemilihan berbilang bentuk.

1. Kotak Semak: Kotak semak membenarkan pengguna memilih satu atau lebih pilihan. Setiap kotak pilihan mempunyai nilai yang dikaitkan dengannya dan apabila pengguna menyemak atau menyahtanda kotak pilihan, keadaan nilai berubah.
2. Butang Radio: Butang radio membenarkan pengguna memilih pilihan daripada satu set pilihan. Pengguna hanya boleh memilih satu daripada pilihan, bukan berbilang pada masa yang sama.
3. Senarai juntai bawah (Pilih): Senarai juntai bawah membolehkan pengguna memilih pilihan daripada pilihan yang telah ditetapkan. Pengguna mengembangkan pilihan dengan mengklik pada senarai juntai bawah dan memilih pilihan.

Berikut ialah beberapa contoh kod khusus yang menunjukkan cara menggunakan JavaScript untuk melaksanakan fungsi pilihan berbilang bentuk:

1. Contoh penggunaan kotak semak :

<input type="checkbox" id="option1" value="Option 1"> Option 1
<input type="checkbox" id="option2" value="Option 2"> Option 2

<script>
  const option1 = document.getElementById('option1');
  const option2 = document.getElementById('option2');

  option1.addEventListener('change', () => {
    if (option1.checked) {
      console.log('Option 1 is checked');
    } else {
      console.log('Option 1 is not checked');
    }
  });

  option2.addEventListener('change', () => {
    if (option2.checked) {
      console.log('Option 2 is checked');
    } else {
      console.log('Option 2 is not checked');
    }
  });
</script>

2. Contoh penggunaan butang radio:

<input type="radio" id="option1" name="options" value="Option 1"> Option 1
<input type="radio" id="option2" name="options" value="Option 2"> Option 2

<script>
  const option1 = document.getElementById('option1');
  const option2 = document.getElementById('option2');

  option1.addEventListener('change', () => {
    if (option1.checked) {
      console.log('Option 1 is selected');
    }
  });

  option2.addEventListener('change', () => {
    if (option2.checked) {
      console.log('Option 2 is selected');
    }
  });
</script>

3. Contoh penggunaan senarai juntai bawah: #🎜##🎜 🎜#

   <select id="options">
     <option value="Option 1">Option 1</option>
     <option value="Option 2">Option 2</option>
   </select>
   
   <script>
     const options = document.getElementById('options');
   
     options.addEventListener('change', () => {
       const selectedOption = options.value;
       console.log('Selected option:', selectedOption);
     });
   </script>

Melalui contoh kod di atas, kita boleh melihat cara menggunakan JavaScript untuk mendapatkan status elemen berbilang pilihan yang dipilih oleh pengguna, dan kemudian memprosesnya dengan sewajarnya.

Ringkasnya, JavaScript boleh melaksanakan fungsi pemilihan berbilang bentuk dengan mudah Dengan mendengar peristiwa perubahan elemen, kami boleh mendapatkan pilihan yang dipilih oleh pengguna dan melaksanakan operasi yang sepadan. Di atas hanyalah beberapa contoh mudah, aplikasi sebenar mungkin memerlukan logik yang lebih kompleks dan fungsi interaktif. Tetapi mudah-mudahan contoh ini akan membantu anda memahami cara menggunakan JavaScript untuk melaksanakan pelbagai fungsi pemilihan dalam borang.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pemilihan berbilang bentuk dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!