Bagaimana saya dapat memeriksa apakah tombol radio dipilih dengan JavaScript?

Saya memiliki dua tombol radio dalam bentuk HTML. Kotak dialog muncul ketika salah satu bidang adalah nol. Bagaimana saya dapat memeriksa apakah tombol radio dipilih?

Mari kita berpura-pura memiliki HTML seperti ini

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

Untuk validasi sisi klien, berikut ini beberapa Javascript untuk memeriksa yang dipilih:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

Di atas bisa dibuat lebih efisien tergantung pada sifat tepat markup Anda, tetapi itu sudah cukup untuk membantu Anda memulai.

Jika Anda hanya ingin melihat apakah ada tombol radio yang dipilih di mana saja di halaman, PrototypeJS membuatnya sangat mudah.

Berikut adalah fungsi yang akan mengembalikan true jika setidaknya satu tombol radio dipilih di suatu tempat di halaman. Sekali lagi, ini mungkin perlu diubah tergantung pada HTML spesifik Anda.

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

Untuk validasi sisi server (ingat, Anda tidak bisa bergantung sepenuhnya pada Javascript untuk validasi!) , Itu akan tergantung pada bahasa pilihan Anda, tetapi Anda akan mengecek gendernilai string permintaan.

Dengan jQuery , itu akan menjadi sesuatu seperti

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

Biarkan saya memecahnya menjadi beberapa bagian untuk menutupinya dengan lebih jelas. jQuery memproses sesuatu dari kiri ke kanan.

input[name=gender]:checked

1. input membatasinya untuk memasukkan tag.
2. [name=gender] batasi pada tag dengan nama gender di dalam grup sebelumnya.
3. :checked batasi pada kotak centang / tombol radio yang dipilih dalam grup sebelumnya.

Jika Anda ingin menghindari ini sama sekali, tandai salah satu tombol radio sebagai dicentang ( checked="checked") dalam kode HTML, yang akan menjamin bahwa satu tombol radio selalu dipilih.

Cara JavaScript vanilla

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}

Hanya mencoba untuk memperbaiki solusi Russ Cam dengan beberapa gula pemilih CSS yang dilemparkan dengan JavaScript vanilla.

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

Tidak perlu jQuery di sini, querySelectorAll cukup didukung secara luas sekarang.

Sunting: memperbaiki bug dengan pemilih css, saya telah menyertakan tanda kutip, meskipun Anda dapat menghilangkannya, dalam beberapa kasus Anda tidak dapat melakukannya sehingga lebih baik meninggalkannya.

Kode HTML

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

Kode Javascript:

var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
    if(off_payment_method[i].checked) {
        ischecked_method = true;
        break;
    }
}
if(!ischecked_method)   { //payment method button is not checked
    alert("Please choose Offline Payment Method");
}

Anda dapat menggunakan skrip sederhana ini. Anda mungkin memiliki beberapa tombol radio dengan nama dan nilai yang sama.

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

if(checked_gender != null){  //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}

Skrip di halaman ini membantu saya membuat skrip di bawah ini, yang menurut saya lebih lengkap dan universal. Pada dasarnya itu akan memvalidasi sejumlah tombol radio dalam formulir, yang berarti bahwa itu akan memastikan bahwa opsi radio telah dipilih untuk masing-masing dari kelompok radio yang berbeda dalam formulir. misalnya dalam formulir tes di bawah ini:

   <form id="FormID">

    Yes <input type="radio" name="test1" value="Yes">
    No <input type="radio" name="test1" value="No">

    <br><br>

    Yes <input type="radio" name="test2" value="Yes">
    No <input type="radio" name="test2" value="No">

   <input type="submit" onclick="return RadioValidator();">

Skrip RadioValidator akan memastikan bahwa jawaban telah diberikan untuk 'test1' dan 'test2' sebelum dikirimkan. Anda dapat memiliki banyak grup radio dalam formulir, dan itu akan mengabaikan elemen formulir lainnya. Semua jawaban radio yang hilang akan ditampilkan di dalam sembulan peringatan tunggal. Ini dia, saya harap ini membantu orang. Selamat datang di setiap perbaikan bug atau modifikasi yang membantu :)

<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
    var ShowAlert = '';
    var AllFormElements = window.document.getElementById("FormID").elements;
    for (i = 0; i < AllFormElements.length; i++) 
    {
        if (AllFormElements[i].type == 'radio') 
        {
            var ThisRadio = AllFormElements[i].name;
            var ThisChecked = 'No';
            var AllRadioOptions = document.getElementsByName(ThisRadio);
            for (x = 0; x < AllRadioOptions.length; x++)
            {
                 if (AllRadioOptions[x].checked && ThisChecked == 'No')
                 {
                     ThisChecked = 'Yes';
                     break;
                 } 
            }   
            var AlreadySearched = ShowAlert.indexOf(ThisRadio);
            if (ThisChecked == 'No' && AlreadySearched == -1)
            {
            ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
            }     
        }
    }
    if (ShowAlert != '')
    {
    alert(ShowAlert);
    return false;
    }
    else
    {
    return true;
    }
}
</SCRIPT>

Perhatikan perilaku ini dengan jQuery ketika mendapatkan nilai input radio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Jadi $('input[name="myRadio"]').val()tidak mengembalikan nilai dicentang dari input radio, seperti yang Anda harapkan - itu mengembalikan nilai tombol radio pertama.

Dengan mootools ( http://mootools.net/docs/core/Element/Element )

html:

<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />

js:

// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))

// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)


// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)


// Set second button selected (by id)
$("radiowithval2").set("checked", true)

ini adalah fungsi utilitas yang saya buat untuk mengatasi masalah ini

    //define radio buttons, each with a common 'name' and distinct 'id'. 
    //       eg- <input type="radio" name="storageGroup" id="localStorage">
    //           <input type="radio" name="storageGroup" id="sessionStorage">
    //param-sGroupName: 'name' of the group. eg- "storageGroup"
    //return: 'id' of the checked radioButton. eg- "localStorage"
    //return: can be 'undefined'- be sure to check for that
    function checkedRadioBtn(sGroupName)
    {   
        var group = document.getElementsByName(sGroupName);

        for ( var i = 0; i < group.length; i++) {
            if (group.item(i).checked) {
                return group.item(i).id;
            } else if (group[0].type !== 'radio') {
                //if you find any in the group not a radio button return null
                return null;
            }
        }
    }

Ini akan berlaku untuk tombol radio yang berbagi nama yang sama, tidak diperlukan JQuery.

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];

Jika kita berbicara tentang kotak centang dan kami ingin daftar dengan kotak centang dicentang berbagi nama:

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });

if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)

hanya sedikit modifikasi untuk Mark Biek;

KODE HTML

<form name="frm1" action="" method="post">
  <input type="radio" name="gender" id="gender_Male" value="Male" />
  <input type="radio" name="gender" id="gender_Female" value="Female" / >
  <input type="button" value="test"  onclick="check1();"/>
</form>

dan kode Javascript untuk memeriksa apakah tombol radio dipilih

<script type="text/javascript">
    function check1() {            
        var radio_check_val = "";
        for (i = 0; i < document.getElementsByName('gender').length; i++) {
            if (document.getElementsByName('gender')[i].checked) {
                alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
                radio_check_val = document.getElementsByName('gender')[i].value;        
            }        
        }
        if (radio_check_val === "")
        {
            alert("please select radio button");
        }        
    }
</script>

Ada cara yang sangat canggih Anda dapat memvalidasi apakah ada tombol radio yang diperiksa dengan ECMA6 dan metode .some().

Html:

<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />

Dan javascript:

let htmlNodes = document.getElementsByName('status');

let radioButtonsArray = Array.from(htmlNodes);

let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

isAnyRadioButtonCheckedakan ada truejika beberapa tombol radio dicentang dan falsejika tidak ada yang dicentang.

Kembalikan semua elemen yang dicentang di tombol radio

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);

http://www.somacon.com/p143.php/

function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
}

Dengan JQuery, cara lain untuk memeriksa status tombol radio saat ini adalah dengan mendapatkan atribut 'diperiksa'.

Sebagai contoh:

<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />

Dalam hal ini Anda dapat memeriksa tombol menggunakan:

if ($("#gender_male").attr("checked") == true) {
...
}

Kode ini akan mengingatkan tombol radio yang dipilih ketika formulir dikirimkan. Ini digunakan jQuery untuk mendapatkan nilai yang dipilih.

$("form").submit(function(e) {
  e.preventDefault();
  $this = $(this);

  var value = $this.find('input:radio[name=COLOR]:checked').val();
  alert(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="COLOR" id="Rojo" type="radio" value="red">
  <input name="COLOR" id="Azul" type="radio" value="blue">
  <input name="COLOR" id="Amarillo" type="radio" value="yellow">
  <br>
  <input type="submit" value="Submit">
</form>

Saya menggunakan operator spread dan beberapa untuk memeriksa setidaknya satu elemen dalam array yang lulus tes.

Saya berbagi untuk siapa perhatian.

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);

<input type="radio" name="gender" checked value="Male" />
<input type="radio" name="gender"  value="Female" / >

Ini adalah solusi yang dikembangkan untuk tidak meneruskan pengiriman dan mengirim peringatan jika tombol radio tidak dicentang. Tentu saja ini berarti Anda harus menghapusnya sejak awal!

if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
  alert ("You must select a button");
  return false;
}

Hanya ingat untuk mengatur id ('radio1', 'radio2' atau apa pun namanya) dalam bentuk untuk masing-masing tombol radio atau skrip tidak akan berfungsi.

Sebuah contoh:

if (!checkRadioArray(document.ExamEntry.level)) { 
    msg+="What is your level of entry? \n"; 
    document.getElementById('entry').style.color="red"; 
    result = false; 
} 

if(msg==""){ 
    return result;  
} 
else{ 
    alert(msg) 
    return result;
} 

function Radio() { 
    var level = radio.value; 
    alert("Your level is: " + level + " \nIf this is not the level your taking then please choose another.") 
} 

function checkRadioArray(radioButtons) { 
    for(var r=0;r < radioButtons.length; r++) { 
        if (radioButtons[r].checked) { 
            return true; 
        } 
    } 
    return false; 
} 

Formulir

<form name="teenageMutant">
  <input type="radio" name="ninjaTurtles"/>
</form>

Naskah

if(!document.teenageMutant.ninjaTurtles.checked){
  alert('get down');
}

Biola: http://jsfiddle.net/PNpUS/

Saya hanya ingin memastikan sesuatu dipilih (menggunakan jQuery):

// html
<input name="gender" type="radio" value="M" /> Male <input name="gender" type="radio" value="F" /> Female

// gender (required)
var gender_check = $('input:radio[name=gender]:checked').val();
if ( !gender_check ) {
    alert("Please select your gender.");
    return false;
}

Jika Anda ingin vanilla JavaScript, tidak ingin mengacaukan markup Anda dengan menambahkan ID pada setiap tombol radio, dan hanya peduli dengan browser modern , pendekatan fungsional berikut sedikit lebih enak untuk saya daripada for for loop:

<form id="myForm">
<label>Who will be left?
  <label><input type="radio" name="output" value="knight" />Kurgan</label>
  <label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>

<script>
function getSelectedRadioValue (formElement, radioName) {
    return ([].slice.call(formElement[radioName]).filter(function (radio) {
        return radio.checked;
    }).pop() || {}).value;
}

var formEl = document.getElementById('myForm');
alert(
   getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

Jika tidak ada yang dicentang, maka akan kembali undefined(meskipun Anda dapat mengubah baris di atas untuk mengembalikan sesuatu yang lain, misalnya, untuk falsedikembalikan, Anda dapat mengubah baris yang relevan di atas menjadi:}).pop() || {value:false}).value; :).

Ada juga pendekatan polyfill berwawasan ke depan karena antarmuka RadioNodeList harus membuatnya mudah untuk hanya menggunakan valueproperti pada daftar elemen radio form anak (ditemukan dalam kode di atas sebagai formElement[radioName]), tetapi itu memiliki masalah sendiri: Cara polyfill RadioNodeList ?

Ini juga berfungsi, menghindari memanggil id elemen tetapi memanggilnya menggunakan elemen array.

Kode berikut didasarkan pada fakta bahwa array, dinamai sebagai grup radiobuttons, disusun oleh elemen radiobuttons dalam urutan yang sama dengan yang dinyatakan dalam dokumen html:

if(!document.yourformname.yourradioname[0].checked 
   && !document.yourformname.yourradioname[1].checked){
    alert('is this working for all?');
    return false;
}

HTML:

<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>

<p id="result"></p>

Skrip JAVAS:

var options = document.getElementsByName("calculation");

for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
        // do whatever you want with the checked radio
        var calc = options[i].value;
        }
    }
    if(typeof calc == "undefined"){
        document.getElementById("result").innerHTML = " select the operation you want to perform";
        return false;
}

Berikan tombol radio, nama yang sama tetapi ID berbeda.

var verified1 = $('#SOME_ELEMENT1').val();
var verified2 = $('#SOME_ELEMENT2').val();
var final_answer = null;
if( $('#SOME_ELEMENT1').attr('checked') == 'checked' ){
  //condition
  final_answer = verified1;
}
else
{
  if($('#SOME_ELEMENT2').attr('checked') == 'checked'){
    //condition
    final_answer = verified2;
   }
   else
   {
     return false;
   }
}