Bagaimana untuk mendapatkan nilai butang radio yang dipilih menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk mendapatkan nilai butang radio yang dipilih menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-30 22:29:02

ke hadapan

2000 orang telah melayarinya

如何使用 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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!