Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyahtanda butang radio menggunakan JavaScript/jQuery?

Bagaimana untuk menyahtanda butang radio menggunakan JavaScript/jQuery?

WBOYke hadapan: 2023-08-31 10:25:02856semak imbas

Kadangkala, kita perlu menyahtanda butang radio menggunakan JavaScript atau JQuery. Sebagai contoh, kami menggunakan butang radio dalam bentuk. Apabila pengguna menekan butang kosongkan borang, kami perlu menyahtanda semua butang radio dan sekali lagi membenarkan pengguna memilih sebarang pilihan daripada butang radio.

Dalam tutorial ini, kita akan mempelajari pelbagai cara untuk menyahtanda butang radio tunggal atau berbilang menggunakan JQuery atau JavaScript.

Gunakan JavaScript untuk menyahtanda butang radio

Kami boleh mengakses butang radio dalam JavaScript menggunakan id, tag, nama atau cara lain. Selepas itu, kita boleh menyahtanda sifat butang radio yang ditandakan dengan memberikan nilai boolean palsu.

Tatabahasa

Pengguna boleh menyahtanda butang radio menggunakan atribut yang ditandakan seperti dalam sintaks di bawah.

radio.checked = false;

Dalam sintaks di atas, radio ialah butang radio yang diakses menggunakan JavaScript.

Contoh 1

Dalam contoh di bawah, kami telah mencipta butang radio. Pengguna boleh menyemak butang radio dengan mengklik padanya. Kemudian, apabila pengguna mengklik butang, ia memanggil fungsi clearRadio().

Dalam fungsi clearRadio(), kami menggunakan id input radio untuk mengaksesnya. Seterusnya, kami mengakses sifat terpilih input radio dan menetapkan nilai boolean palsu untuk menyahtanda butang radio.

<html>
<body>
   <h2> Using the <i> Checked property of radio button </i> to uncheck radio button in JavaScript. </h2>
   <br>
   <label for = "radio_btn"> Test </label>
   <input type = "radio" id = "radio_btn" value =   "test">
   <br> <br>
   <button onclick = "clearRadio()"> Uncheck Radio </button>
   <br> <br>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById("output");
   function clearRadio() {
      let radio = document.getElementById("radio_btn");
      radio.checked = false;
   }
</script>
</html>

Dalam output di atas, pengguna boleh melihat bahawa input radio dikosongkan apabila butang "Nyahtanda Radio" ditekan.

Nyahtanda butang radio menggunakan JQuery

Kami juga boleh menggunakan JQuery untuk mengosongkan input radio. Dalam JQuery, kita boleh menetapkan sebarang atribut untuk elemen HTML menggunakan kaedah prop(). Kaedah prop() mengambil dua nilai sebagai parameter: nama harta dan nilai harta.

Di sini kami akan menghantar "disemak" sebagai nama harta dan palsu sebagai nilai harta untuk menyahtanda butang radio tertentu menggunakan JQuery.

Tatabahasa

Pengguna boleh menyahtanda butang radio menggunakan kaedah prop() JQuery dengan mengikut sintaks berikut.

$("#radio_btn").prop('checked', false);

Dalam sintaks di atas, kami menghantar nama atribut "disemak" sebagai parameter pertama dan nilai atribut palsu sebagai parameter kedua.

Contoh 2

Dalam contoh di bawah, kami telah mencipta butang radio. Apabila acara klik dicetuskan pada butang, ia akan mengosongkan butang radio dengan menetapkan nilai palsu untuk sifat yang dipilih menggunakan kaedah prop().

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h2> Using the <i> prop() method </i> to uncheck radio button in JQuery</h2>
   <label for = "radio_btn"> Clear </label>
   <input type = "radio" id = "radio_btn" value = "clear">
   <br> <br>
   <button id = "btn"> Uncheck Radio </button>
   <br> <br>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById("output");
      
      // detect button click
      $('#btn').click(function () {
      
         // Clear radio button
         $("#radio_btn").prop('checked', false);
      })
</script>
</html>

Contoh 3

Kami telah mencipta berbilang input radio dan mengumpulkannya dalam contoh di bawah. Oleh itu, pengguna boleh memilih mana-mana satu daripada keempat-empat input radio. Apabila pengguna mengklik butang, ia mengosongkan semua input radio.

Di sini kami mengakses input radio mengikut jenis dan nama. Jadi walaupun pengguna memilih sebarang input radio daripada kumpulan, ia akan menyahtandanya.

<html>
<head>
   <script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h2> Using <i> jQuery </i> to clear multiple radio buttons </h2>
   <label for = "color"> Blue </label>
   <input type = "radio" id = "color" name = "color" value = "Blue">
   <label for = "color"> Black </label>
   <input type = "radio" id = "color" name = "color" value = "Black">
   <label for = "color"> Brown </label>
   <input type = "radio" id = "color" name = "color" value = "Brown">
   <label for = "color"> Green </label>
   <input type = "radio" id = "color" name = "color" value = "Green">
   <br> <br>
   <button id = "btn"> Clear all radio buttons </button>
   <br> <br>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById("output");
   $('#btn').click(function () {
      
      // clear all radio buttons
      $("input[type=radio][name=color]").prop('checked', false);
      output.innerHTML = "All radio buttons are unchecked!"
   })
</script>
</html>

Kami belajar mengosongkan input radio apabila diperlukan menggunakan JavaScript dan jQuery. Juga, adalah perlu untuk mengosongkan input radio apabila pengguna menyerahkan borang. Pengguna boleh mengakses kumpulan butang radio mengikut jenis dan nama mereka, dan kemudian mengosongkan semua butang radio untuk satu kumpulan.

Atas ialah kandungan terperinci Bagaimana untuk menyahtanda butang radio menggunakan JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery html 事件

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk memasukkan aksara dalam IText menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk memasukkan aksara dalam IText menggunakan FabricJS?

Artikel berkaitan

Lihat lagi