Bagaimana untuk menyahtanda kotak semak dengan javascript

Javascript ialah bahasa skrip yang biasanya digunakan untuk kesan khas dinamik dan interaksi pada halaman web. Kotak semak ialah elemen input yang digunakan dalam borang yang membolehkan pengguna memilih satu atau lebih pilihan. Dalam sesetengah kes, kami mahu kotak semak dinyahtanda Dalam kes ini, kami boleh menggunakan Javascript untuk mencapai fungsi ini.

Situasi biasa termasuk:

1. Melumpuhkan kotak pilihan apabila halaman dimuatkan

Kadangkala kami mahu beberapa kotak pilihan dinyahtandai secara lalai apabila halaman dimuatkan. Anda boleh menambah atribut yang dilumpuhkan pada kotak pilihan ini supaya ia tidak boleh dipilih.

Kod HTML:

<input type="checkbox" name="checkbox1" value="1" disabled>
<input type="checkbox" name="checkbox2" value="2" disabled>
<input type="checkbox" name="checkbox3" value="3" disabled>

Dengan cara ini, kotak pilihan ini akan dilumpuhkan dari awal dan tidak boleh dipilih.

2. Kotak pilihan melumpuhkan penghakiman bersyarat

Kadangkala kita perlu menilai sama ada untuk meninggalkan kotak pilihan tanpa tanda berdasarkan pilihan pengguna. Ini boleh dicapai menggunakan Javascript.

Kod HTML:

<input type="checkbox" name="checkbox1" value="1" onchange="disableIfChecked(this)">

Apabila kotak pilihan berubah, acara onchange akan dilaksanakan. Dalam acara ini, kita boleh menentukan sama ada untuk menjadikannya dinyahtanda berdasarkan keadaan kotak pilihan.

Kod Javascript:

function disableIfChecked(checkbox) {
   if (checkbox.checked) {
      checkbox.checked = false;
   }
}

Pernyataan if dalam kod ini menentukan sama ada kotak semak dipilih dan jika ya, tetapkannya kepada keadaan tidak ditanda.

3. Klik butang untuk melumpuhkan kotak pilihan

Satu lagi situasi biasa ialah kami mahu beberapa kotak pilihan menjadi dinyahtanda selepas pengguna mengklik butang. Sekali lagi, ini juga boleh dicapai menggunakan Javascript.

Kod HTML:

<input type="checkbox" name="checkbox1" value="1">
<input type="checkbox" name="checkbox2" value="2">
<input type="checkbox" name="checkbox3" value="3">
<button onclick="disableCheckboxes()">Disable Checkboxes</button>

Dalam contoh ini, kami mempunyai tiga kotak pilihan dan satu butang. Apabila butang diklik, Javascript akan melaksanakan fungsi disableCheckboxes() untuk menetapkan kotak semak kepada keadaan tidak ditanda.

Kod JavaScript:

function disableCheckboxes() {
   var checkboxes = document.getElementsByTagName('input');
   for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == &#39;checkbox&#39;) {
         checkboxes[i].checked = false;
      }
   }
}

Dalam kod ini, kita mula-mula mendapat semua elemen input, dan kemudian menentukan sama ada jenisnya ialah kotak pilihan. Jika ya, tetapkannya kepada nyahtanda.

4. Lumpuhkan kotak pilihan apabila borang diserahkan

Situasi lain ialah kami mahu beberapa kotak pilihan tidak boleh dipilih apabila pengguna menyerahkan borang. Sekali lagi, ini juga boleh dicapai menggunakan Javascript.

Kod HTML:

<form onsubmit="disableCheckboxesOnSubmit()">
   <input type="checkbox" name="checkbox1" value="1">
   <input type="checkbox" name="checkbox2" value="2">
   <input type="checkbox" name="checkbox3" value="3">
   <input type="submit" value="Submit">
</form>

Dalam contoh ini, kami menambahkan acara onsubmit pada elemen borang, iaitu fungsi yang dilaksanakan apabila borang diserahkan. Kemudian dalam fungsi ini, kita boleh menetapkan kotak semak kepada keadaan tidak ditanda untuk mengelakkan salah operasi pengguna.

Kod JavaScript:

function disableCheckboxesOnSubmit() {
   var checkboxes = document.getElementsByTagName('input');
   for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == 'checkbox') {
         if (checkboxes[i].checked) {
            // 如果 checkbox 被选中，则禁用它
            checkboxes[i].disabled = true;
         }
      }
   }
}

Dalam kod ini, kami juga menggunakan kaedah untuk mendapatkan semua elemen input dan menentukan jenisnya. Tetapi kali ini kami menentukan sama ada kotak semak dipilih, dan jika ya, lumpuhkannya. Dengan cara ini, pengguna tidak boleh memilih kotak semak sekali lagi semasa menyerahkan borang.

Di atas ialah cara menggunakan Javascript untuk menghalang kotak pilihan daripada dipilih. Adalah penting untuk ambil perhatian bahawa kaedah ini akan menjejaskan pengalaman pengguna, jadi kaedah ini perlu digunakan dengan berhati-hati. Jika ini tidak dapat dielakkan, gesaan yang sesuai harus diberikan dalam antara muka untuk memaklumkan pengguna bahawa kotak semak ini dilumpuhkan.

Atas ialah kandungan terperinci Bagaimana untuk menyahtanda kotak semak dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!