JavaScript ile bir radyo düğmesinin seçilip seçilmediğini nasıl kontrol edebilirim?

HTML formunda iki radyo düğmem var. Alanlardan biri boş olduğunda bir iletişim kutusu görüntülenir. Bir radyo düğmesinin seçilip seçilmediğini nasıl kontrol edebilirim?

Bunun gibi bir HTML'niz olduğunu varsayalım

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

İstemci tarafı doğrulaması için, hangisinin seçildiğini kontrol etmek için bazı Javascriptler:

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

Yukarıdakiler, işaretlemenizin tam doğasına bağlı olarak daha verimli hale getirilebilir, ancak bu, başlamanız için yeterli olmalıdır.

Sayfanın herhangi bir yerinde herhangi bir radyo düğmesinin seçilip seçilmediğini görmek istiyorsanız PrototypeJS bunu çok kolaylaştırır.

Burada, sayfanın herhangi bir yerinde en az bir radyo düğmesi seçildiğinde true değerini döndürecek bir işlev bulunmaktadır. Yine, özel HTML'nize bağlı olarak bunun ayarlanması gerekebilir.

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

Sunucu tarafı doğrulaması için (unutmayın, doğrulama için tamamen Javascript'e güvenemezsiniz!) , Seçtiğiniz dilinize bağlı olacaktır, ancak genderistek dizesinin değerini kontrol edersiniz .

JQuery ile böyle bir şey olurdu

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

Daha net bir şekilde örtmek için bunu parçalara ayırmama izin verin. jQuery işleri soldan sağa işler.

input[name=gender]:checked

1. input bunu giriş etiketleriyle sınırlar.
2. [name=gender] bir önceki grupta cinsiyet adı olan etiketlerle sınırlar.
3. :checked bir önceki grupta seçilen onay kutuları / radyo düğmeleriyle sınırlar.

Bundan tamamen kaçınmak istiyorsanız, radyo düğmelerinden birini checked="checked"HTML kodunda işaretli ( ) olarak işaretleyin , bu da bir radyo düğmesinin her zaman seçildiğini garanti eder.

Vanilya JavaScript yolu

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;       
    }
}

Sadece vanilya JavaScript ile atılan bazı CSS seçici şeker ile Russ Cam'ın çözümünü geliştirmeye çalışıyorum .

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

Burada jQuery için gerçek bir gerek yok, querySelectorAll şu anda yeterince desteklenmektedir.

Düzenleme: css seçici ile bir hata düzeltildi, tırnakları dahil ettim, ancak bunları atlayabilirsiniz, bazı durumlarda yapamazsınız, böylece onları bırakmak daha iyidir.

HTML Kodu

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

Javascript Kodu:

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");
}

Bu basit komut dosyasını kullanabilirsiniz. Aynı adlara ve farklı değerlere sahip birden fazla radyo düğmeniz olabilir .

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.
}

Bu sayfadaki komut dosyaları, aşağıdaki komut dosyasını bulmama yardımcı oldu, ki bence daha eksiksiz ve evrensel. Temel olarak bir formdaki herhangi bir sayıda radyo düğmesini doğrular, yani formdaki farklı radyo gruplarının her biri için bir radyo seçeneğinin seçildiğinden emin olur. örneğin aşağıdaki test formunda:

   <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();">

RadioValidator betiği, gönderilmeden önce hem 'test1' hem de 'test2' için bir yanıt verildiğinden emin olacaktır. Formda çok sayıda radyo grubunuz olabilir ve diğer form öğelerini yok sayacaktır. Eksik olan tüm radyo yanıtları tek bir uyarı açılır penceresinde gösterilir. İşte gidiyor, umarım insanlara yardım eder. Herhangi bir hata düzeltmesi veya yararlı değişiklik hoş geldiniz :)

<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>

Radyo giriş değerleri alınırken jQuery ile ilgili bu davranışa dikkat edin:

$('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() ); 

});

Yani $('input[name="myRadio"]').val()tahmin edebileceğiniz gibi, radyo girişinin kontrol değer döndürmez - bu ilk radyo düğmesinin değeri döndürür.

Mootoollerle ( 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)

Bu, bu sorunu çözmek için oluşturduğum bir yardımcı program işlevi

    //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;
            }
        }
    }

Bu, aynı adı paylaşan radyo düğmeleri için geçerlidir, JQuery gerekmez.

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

Onay kutularından bahsediyorsak ve onay kutularının bir ad paylaştığını işaretleyen bir liste istiyorsak:

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)

Mark Biek'e ufak bir değişiklik;

HTML KODU

<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>

ve radyo düğmesinin seçilip seçilmediğini kontrol etmek için Javascript kodu

<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>

Radyo düğmelerinden herhangi birinin ECMA6 ve yöntemle kontrol edilip edilmediğini doğrulamanın çok karmaşık bir yolu var .some() .

Html:

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

Ve javascript:

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

let radioButtonsArray = Array.from(htmlNodes);

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

isAnyRadioButtonCheckedolacak trueradyo düğmelerinin bazı kontrol edilir ve eğer falseikisi de işaretli ise.

Kontrol edilen tüm öğeyi radyo düğmesinde döndür

  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 "";
}

JQuery ile, radyo düğmelerinin mevcut durumunu kontrol etmenin başka bir yolu da 'işaretlenmiş' niteliğini almaktır.

Örneğin:

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

Bu durumda düğmeleri kullanarak şunları kontrol edebilirsiniz:

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

Bu kod, form gönderildiğinde seçilen radyo düğmesini uyaracaktır. Seçilen değeri almak için jQuery kullandı.

$("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>

Ben yayılma operatörü ve bazı dizideki en az bir öğe testi geçer kontrol etmek için kullanılır .

Kimin için endişe duyuyorum.

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" / >

Radyo düğmeleri kontrol edilmezse, gönderime devam etmemek ve bir uyarı göndermek için genişletilen çözüm. Tabii ki bu, başlamak için onları işaretlememeniz gerektiği anlamına gelir!

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

Sadece radyo düğmelerinin her biri için kimliği ('radio1', 'radio2' veya her ne dediyseniz) ayarlamayı unutmayın, aksi takdirde komut dosyası çalışmaz.

Bir örnek:

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; 
} 

Form

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

Senaryo

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

Keman: http://jsfiddle.net/PNpUS/

Ben sadece (jQuery kullanarak) bir şey seçilmesini sağlamak istiyorum :

// 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;
}

Vanilya JavaScript'i istiyorsanız, her radyo düğmesine kimlik ekleyerek işaretlemenizi karıştırmak istemeyin ve sadece modern tarayıcılara dikkat edin, aşağıdaki fonksiyonel yaklaşım benim için bir for döngüsünden biraz daha zevkli:

<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>

Her ikisi de işaretlenmezse, geri dönecektir undefined(yukarıdaki satırı başka bir şey döndürmek için değiştirebilmenize rağmen, örneğin, geri dönmek için false, yukarıdaki ilgili satırı şu şekilde değiştirebilirsiniz:}).pop() || {value:false}).value; .

RadioNodeList arabirimi value, form alt radyo öğeleri (yukarıdaki kodda bulunan) formunda sadece bir özellik kullanmayı kolaylaştırması gerektiğinden , ileriye dönük çoklu dolgu yaklaşımı formElement[radioName]da vardır, ancak kendi sorunları vardır: RadioNodeList nasıl çoklu doldurulur ?

Bu aynı zamanda, bir eleman kimliği çağırmaktan kaçınarak bir dizi elemanı olarak çağırmaktan da işe yarar.

Aşağıdaki kod, radyo düğmeleri grubu olarak adlandırılan bir dizinin, radyo düğmeleri öğeleriyle html belgesinde bildirildiği sırada aynı sırada oluşturulduğu gerçeğine dayanır:

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>

JavaScript:

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;
}

Radyo düğmelerine, aynı ada ancak farklı kimlikler verin.

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;
   }
}