Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendapatkan nilai butang radio yang dipilih menggunakan JavaScript?

Bagaimana untuk mendapatkan nilai butang radio yang dipilih menggunakan JavaScript?

WBOYke hadapan: 2023-08-30 22:29:021919semak imbas

如何使用 JavaScript 获取选定单选按钮的值？

Salah satu komponen HTML yang paling penting semasa cuba mereka bentuk borang ialah butang radio. Pengguna hanya boleh memilih satu pilihan daripada pilihan yang dipaparkan oleh butang radio.

Biasanya, kami hanya menggunakan atribut nilai elemen dalam JavaScript untuk mendapatkan semula nilai elemen daripada halaman web HTML. Tetapi untuk butang radio kita tidak boleh berbuat demikian. Sebabnya ialah mendapatkan nilai butang radio individu adalah idea yang tidak baik.

Mari mulakan membaca artikel ini untuk mengetahui cara mendapatkan nilai butang radio yang dipilih. Untuk ini kami akan menggunakan atribut yang diperiksa.

Gunakan atribut terpilih

Atribut yang ditandakan ialah atribut Boolean. Jika ada, ia menunjukkan bahawa elemen harus diprapilih (ditanda) apabila halaman dimuatkan. Hartanah Disemak boleh digunakan dengan kotak semak dan jenis input radio. Menggunakan JavaScript, atribut yang disemak juga boleh diubah suai selepas halaman dimuatkan.

tatabahasa

Berikut ialah sintaks untuk menyemak atribut -

<input checked>

Mari lihat beberapa contoh untuk lebih memahami cara mendapatkan nilai butang radio yang dipilih

Contoh

Dalam contoh di bawah, kami menjalankan skrip untuk mendapatkan nilai butang radio yang dipilih.

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1 ">
      <center>
         <div id="tutorial">
            <p>Choose The Course</p>
            <div>
               <input type="radio" id="java" name="course" value="java" />
               <label for="java">JAVA</label>
               <input type="radio" id="html" name="course" value="html" />
               <label for="html">HTML</label>
            </div>
            <button id="tutorial1">Click</button>
         </div>
      </center>
      <script>
         document.getElementById("tutorial1").onclick = function () {
            var radioButtonGroup = document.getElementsByName("course");
            var checkedRadio = Array.from(radioButtonGroup).find(
               (radio) => radio.checked
            );
            alert("The Selected Course Was : " + checkedRadio.value);
         };
      </script>
   </body>
</html>

Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada teks serta butang radio dan butang klik. Apabila pengguna memilih butang radio dan mengkliknya, pop timbul memaparkan nilai yang anda pilih.

Contoh

Pertimbangkan contoh berikut di mana kami menjalankan skrip untuk mendapatkan nilai butang radio yang dipilih.

<!DOCTYPE html>
<html>
   <body style="text-align:center;background-color:#D2B4DE;">
      <p>
         Choose Value And Click Submit Button
      </p>
      Choose:
      <input type="radio" name="Choose" value="LogIn">Login In
      <input type="radio" name="Choose" value="SignUp">Sign Up
      <br>
      <button type="button" onclick="getvalue()">
         Submit
      </button>
      <br>
      <div id="result"></div>
      <script>
         function getvalue() {
            var ele = document.getElementsByName('Choose');
            for(i = 0; i < ele.length; i++) {
               if(ele[i].checked)
               document.getElementById("result").innerHTML = "Choosen: "+ele[i].value;
            }
         }
      </script>
   </body>
</html>

Apabila anda menjalankan skrip di atas, tetingkap output akan muncul, memaparkan teks serta butang radio dan butang hantar. Apabila pengguna memilih butang radio dan mengklik butang serah, acara dicetuskan dan memaparkan nilai yang dipilih.

Gunakan fungsi querySelector()

querySelector() Fungsi mengembalikan elemen pertama dokumen yang sepadan dengan pemilih atau set pemilih yang diberikan. Jika tiada padanan ditemui, Null dikembalikan.

tatabahasa

Berikut ialah sintaks querySelector() -

querySelector(selectors)

Contoh

Laksanakan kod berikut dan perhatikan bagaimana kami mendapat nilai butang radio yang dipilih.

<!DOCTYPE html>
<html>
   <body style="text-align:center;background-color:#D6EAF8 ;">
      <div id="tutorial">
         <p>Choose The Gender:</p>
         <div>
            <input type="radio" id="male" name="gender" value="Male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="Female">
            <label for="Female">Female</label>
            <input type="radio" id="others" name="gender" value="Others">
            <label for="Others">Others</label>
         </div>
         <button id="click">Submit</button>
      </div>
      <script>
         document.getElementById('click').onclick = function() {
            var selected = document.querySelector('input[type=radio][name=gender]:checked');
            alert(selected.value);
         }
      </script>
   </body>
</html>

Apabila anda menjalankan skrip, ia akan menghasilkan output yang terdiri daripada teks bersama butang radio dan butang hantar. Apabila pengguna memilih nilai dan mengklik butang, tetingkap muncul menunjukkan nilai yang dipilih.

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

JavaScript html NULL 事件选择器

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk mencipta fungsi tak segerak dalam TypeScript?Artikel seterusnya：Bagaimana untuk mencipta fungsi tak segerak dalam TypeScript?

Artikel berkaitan

Lihat lagi