Bagaimana untuk menyemak sama ada butang radio dipilih menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menyemak sama ada butang radio dipilih menggunakan JavaScript?

王林

Lepaskan： 2023-08-24 21:49:02

ke hadapan

1907 orang telah melayarinya

如何使用 JavaScript 检查单选按钮是否被选中？

Dalam HTML, butang Radio membenarkan pembangun membuat berbilang pilihan untuk pilihan. Pengguna boleh memilih mana-mana pilihan dan kita boleh mendapatkan nilainya dan mengetahui pilihan mana yang dipilih pengguna di antara berbilang pilihan.

Oleh itu, adalah penting untuk menyemak butang radio yang dipilih oleh pengguna untuk memahami pilihan mereka daripada berbilang pilihan. Marilah kita memahaminya melalui contoh kehidupan sebenar. Apabila anda mengisi sebarang borang dan meminta untuk memilih jantina, anda boleh melihat mereka memberi anda tiga pilihan dan anda boleh memilih satu sahaja.

Dalam tutorial ini, kita akan mempelajari dua cara untuk menyemak sama ada butang radio dipilih menggunakan JavaScript.

Gunakan atribut butang radio yang ditandakan

Kita boleh mengakses elemen radio dalam JavaScript menggunakan pelbagai kaedah. Selepas itu kita boleh menyemak sama ada butang radio yang dipilih disemak atau tidak menggunakan sifatnya yang diperiksa. Jika nilai atribut yang diperiksa adalah benar, ini bermakna butang radio dipilih jika tidak, ia tidak dipilih.

Tatabahasa

Pengguna boleh menyemak sama ada butang radio disemak menggunakan atribut checked elemen radio mengikut sintaks berikut.

<input type = "radio" name = "radio" value = "male" id = "radio1" > Male</input> 
<script>
   let radio1 = document.getElementById('radio1');
   if(radio1.checked){
      // radio1 is checked
   }
</script>

Salin selepas log masuk

Dalam sintaks di atas, kami mengakses butang radio menggunakan idnya dan menggunakan atribut yang disemak untuk menyemak sama ada butang radio dipilih dalam pernyataan if.

Contoh

Dalam contoh di bawah, kami telah mencipta tiga butang radio dengan nilai yang berbeza seperti Lelaki, Perempuan, dsb. Dalam JavaScript, kami mengakses setiap butang radio dengan IDnya dan menyemak nilai setiap atribut "disemak" butang radio.

Apabila pengguna memilih mana-mana butang radio dan mengklik padanya, mereka akan melihat mesej yang menunjukkan nilai butang radio yang dipilih.

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3>
   <input type = "radio" name = "radio" value = "male" id = "radio1" > Male </input> <br>
   <input type = "radio" name = "radio" value = "female" id = "radio2" > Female </input><br>
   <input type = "radio" name = "radio" value = "other" id = "radio3" /> Other </input>
   <p id = "output"> </p>
   <button onclick = "checkRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function checkRadio(){
         // accessing the radio buttons
         let radio1 = document.getElementById('radio1');
         let radio2 = document.getElementById('radio2');
         let radio3 = document.getElementById('radio3');
         // checking if any radio button is selected
         if(radio1.checked){
            output.innerHTML = "The radio button with value " + radio1.value + " is checked!";
         }
         if(radio2.checked){
            output.innerHTML = "The radio button with value " + radio2.value + " is checked!";
         }
         if(radio3.checked){
            output.innerHTML = "The radio button with value " + radio3.value + " is checked!";
         }
      }
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Contoh di bawah hampir sama dengan yang di atas, tetapi bezanya kita mengakses semua butang radio sekali gus menggunakan nama mereka. Kaedah getElementByName() mengembalikan semua elemen radio bernama radio.

Selepas itu, kami menggunakan gelung for-of untuk mengulangi tatasusunan butang radio dan menyemak sama ada setiap butang radio disemak menggunakan atribut "ditanda".

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3>
   <input type = "radio" name = "radio" value = "10" id = "radio1"> 10 </input> <br>
   <input type = "radio" name = "radio" value = "20" id = "radio2"> 20 </input> <br>
   <input type = "radio" name = "radio" value = "30" id = "radio3" /> 30 </input>
   <p id = "output"> </p>
   <button onclick = "getSelectedRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         let radioButtons = document.getElementsByName('radio');
         for (let radio of radioButtons) {
            if (radio.checked) {
               output.innerHTML = "The radio button is selected and it's value is " + radio.value;
            }
         }
      }
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah querySelector() untuk menyemak sama ada butang radio dipilih

Pengaturcara boleh menggunakan kaedah QuerySelector() JavaScript untuk memilih mana-mana elemen HTML. Di sini kami menggunakan kaedah querySelector() untuk memilih hanya butang radio yang dipilih. Jika butang radio tidak dipilih, nilai nol dikembalikan.

Tatabahasa

Pengguna boleh menggunakan kaedah querySelector() mengikut sintaks berikut untuk menyemak sama ada butang radio dipilih.

var selected = document.querySelector('input[name="year"]:checked');

Salin selepas log masuk

Dalam sintaks di atas, "tahun" ialah nama kumpulan butang radio dan ia mengembalikan sebarang butang radio yang tergolong dalam kumpulan "tahun" dan dipilih.

Contoh

Dalam contoh di bawah, kami telah mencipta tiga butang radio untuk menyediakan pengguna dengan tiga pilihan berbeza. Apabila pengguna mengklik butang "Semak Tahun Dipilih", ia memanggil fungsi getSelectedRadio(), yang memilih butang radio bernama "tahun" menggunakan kaedah querySelector() dan menyemaknya daripada DOM.

Pengguna boleh mengklik butang dan memerhatikan output tanpa memilih sebarang butang radio.

<html>
<body>
   <h3>Using the <i> querySelector() method </i> to check whether a radio button is selected.</h3>
   <input type = "radio" name = "year" value = "1999" id = "radio1"> 1999 </input><br>
   <input type = "radio" name = "year" value = "2021" id = "radio2"> 2021 </input><br>
   <input type = "radio" name = "year" value = "2001" id = "radio3" /> 2001 </input>
   <p id="output"></p>
   <button onclick="getSelectedRadio()">Check selected year</button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         var selected = document.querySelector(
         'input[name="year"]:checked');
         if (selected) {
            output.innerHTML += "Radio button is selected."
         } else {
            output.innerHTML += "Not any radio button is selected!"
         }
      }
   </script>
</body>
</html>

Salin selepas log masuk

Pengguna mempelajari dua cara berbeza untuk mendapatkan butang radio yang dipilih menggunakan JavaScript. Cara terbaik ialah menggunakan kaedah querySelector() kerana kita hanya perlu menulis satu baris kod.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada butang radio dipilih menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!