Selepas kotak semak kawalan JavaScript hanya boleh memilih dua item, tiada apa-apa lagi yang boleh dipilih.

Dengan pembangunan aplikasi web, JavaScript telah menjadi salah satu pengetahuan yang diperlukan untuk jurutera hadapan. Kotak pilihan ialah salah satu kawalan web biasa dan JavaScript boleh digunakan untuk mengawal interaksi kotak pilihan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mengawal kotak semak Selepas hanya dua item boleh dipilih, pilihan yang selebihnya tidak boleh dipilih.

1. Asas HTML

Sebelum kami menggunakan JavaScript untuk mengawal kotak semak, kami perlu memahami sintaks asas kotak semak dalam HTML. Kotak semak dalam HTML dilaksanakan menggunakan teg Contohnya:

<input type="checkbox" name="option1" value="1">

Kod di atas akan membuat kotak pilihan bernama "option1" dengan nilai 1. Melalui atribut nama, kita boleh mencari kotak semak ini dalam kod JavaScript berikutnya, dan melalui atribut nilai, kita boleh mendapatkan atau menetapkan keadaan kotak semak yang dipilih.

2. Pelaksanaan JavaScript

Sekarang kami mula menerangkan cara menggunakan JavaScript untuk mengawal kotak semak. Idea utama ialah apabila kotak semak ditandakan, baki kotak pilihan yang tidak ditanda akan dinyahdayakan. Kita boleh menggunakan kaedah addEventListener() untuk menambah acara klik pada setiap kotak semak, dan kemudian melaksanakan logik di atas dalam fungsi panggil balik acara.

Berikut ialah kod pelaksanaan khusus:

// 获取所有复选框元素
var checkboxes = document.querySelectorAll("input[type='checkbox']");
// 选择次数计数器，初始化为0
var checkedCount = 0;

// 遍历所有复选框，为它们添加点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("click", function() {
    if (this.checked) {
      // 如果当前复选框被选中，判断当前是否已选中两项
      if (checkedCount >= 2) {
        // 已选中两项，禁用其余未选中的复选框
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            checkboxes[j].disabled = true;
          }
        }
      } else {
        // 尚未选中两项，计数器+1
        checkedCount++;
      }
    } else {
      // 如果当前复选框被取消选中，计数器-1，检查是否需要解除禁用
      checkedCount--;
      if (checkedCount < 2) {
        for (var j = 0; j < checkboxes.length; j++) {
          checkboxes[j].disabled = false;
        }
      }
    }
  });
}

Dalam kod di atas, kami mula-mula menggunakan kaedah document.querySelectorAll() untuk mendapatkan semua elemen kotak semak dan mentakrifkan kaunter ditandaCount untuk merekodkan yang ditandakan Bilangan kotak pilihan. Kemudian, ulangi semua elemen kotak semak dan tambahkan acara klik padanya. Dalam setiap fungsi panggil balik acara klik, kami menyemak sama ada kotak semak semasa dipilih. Jika dipilih, tentukan sama ada nombor yang dipilih adalah sama dengan 2. Jika kurang daripada 2, kemudian +1 kaunter, jika tidak, lumpuhkan baki kotak pilihan yang tidak ditandai. Jika kotak semak tidak ditandakan, kemudian kira -1 dan semak sama ada kotak itu perlu dinyahtandai.

3. Demonstrasi Kesan

Kami boleh menguji kesan kod JavaScript di atas dalam halaman HTML. Simpan kod di atas sebagai fail JavaScript, seperti checkbox.js, dan kemudian pautkan fail JavaScript ini dalam halaman HTML:

<script src="checkbox.js"></script>

Kemudian tambahkan berbilang kotak pilihan dalam halaman HTML, seperti:

<input type="checkbox" name="option1" value="1">选项1

选项2

选项3

选项4

选项5

Buka halaman HTML ini dalam penyemak imbas, kita boleh melihat beberapa kotak pilihan. Selepas dua daripada kotak pilihan dipilih, kotak pilihan yang tinggal menjadi tidak boleh dipilih.

4. Ringkasan

JavaScript boleh mengawal interaksi dalam aplikasi web dengan mudah, seperti mengawal gelagat pemilihan kotak semak. Kaedah pelaksanaan di atas hanyalah satu daripada idea, dan ia sebenarnya boleh diselaraskan dan dioptimumkan mengikut keperluan khusus. Saya harap artikel ini dapat membantu semua orang memahami aplikasi dan amalan JavaScript dalam pembangunan aplikasi web.

Atas ialah kandungan terperinci Selepas kotak semak kawalan JavaScript hanya boleh memilih dua item, tiada apa-apa lagi yang boleh dipilih.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!