Wie kann ich überprüfen, ob mit JavaScript ein Optionsfeld ausgewählt ist?

Ich habe zwei Optionsfelder in einem HTML-Formular. Ein Dialogfeld wird angezeigt, wenn eines der Felder null ist. Wie kann ich überprüfen, ob ein Optionsfeld ausgewählt ist?

Stellen wir uns vor, Sie hätten HTML wie dieses

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

Für die clientseitige Validierung finden Sie hier Javascript, um zu überprüfen, welches ausgewählt ist:

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

Das oben Genannte könnte je nach Art Ihres Markups effizienter gestaltet werden. Dies sollte jedoch ausreichen, um Ihnen den Einstieg zu erleichtern.

Wenn Sie sich nur um zu sehen suchen , wenn jedes Optionsfeld ausgewählt ist überall auf der Seite, PrototypeJS macht es sehr einfach.

Hier ist eine Funktion, die true zurückgibt, wenn mindestens ein Optionsfeld irgendwo auf der Seite ausgewählt ist. Auch dies muss möglicherweise abhängig von Ihrem spezifischen HTML-Code angepasst werden.

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

Bei der serverseitigen Validierung (denken Sie daran, dass Sie sich bei der Validierung nicht vollständig auf Javascript verlassen können!) Hängt dies von der Sprache Ihrer Wahl ab, aber Sie würden nur den genderWert der Anforderungszeichenfolge überprüfen .

Mit jQuery wäre es so etwas wie

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

Lassen Sie mich das in Stücke zerlegen, um es klarer abzudecken. jQuery verarbeitet Dinge von links nach rechts.

input[name=gender]:checked

1. input beschränkt es auf Eingabe-Tags.
2. [name=gender] beschränkt es auf Tags mit dem Namen gender innerhalb der vorherigen Gruppe.
3. :checked beschränkt es auf Kontrollkästchen / Optionsfelder, die in der vorherigen Gruppe ausgewählt wurden.

Wenn Sie dies ganz vermeiden möchten, markieren Sie eines der Optionsfelder checked="checked"im HTML-Code als markiert ( ) , um sicherzustellen, dass immer ein Optionsfeld ausgewählt ist.

Ein Vanille-JavaScript-Weg

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

Ich versuche nur, die Lösung von Russ Cam mit etwas CSS-Selektorzucker zu verbessern, der mit dem Vanille-JavaScript eingeworfen wurde.

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

Hier wird jQuery nicht wirklich benötigt, querySelectorAll wird jetzt weitgehend genug unterstützt.

Bearbeiten: Ein Fehler mit dem CSS-Selektor wurde behoben. Ich habe die Anführungszeichen eingefügt, obwohl Sie sie weglassen können. In einigen Fällen können Sie dies nicht. Daher ist es besser, sie beizubehalten.

HTML Quelltext

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

Javascript Code:

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

Sie können dieses einfache Skript verwenden. Möglicherweise haben Sie mehrere Optionsfelder mit demselben Namen und unterschiedlichen Werten.

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

Die Skripte auf dieser Seite haben mir geholfen, das folgende Skript zu erstellen, das meiner Meinung nach vollständiger und universeller ist. Grundsätzlich werden beliebig viele Optionsfelder in einem Formular überprüft, dh es wird sichergestellt, dass für jede der verschiedenen Optionsgruppen im Formular eine Optionsoption ausgewählt wurde. zB im folgenden Testformular:

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

Das RadioValidator-Skript stellt sicher, dass sowohl für 'test1' als auch für 'test2' eine Antwort gegeben wurde, bevor es gesendet wird. Sie können so viele Funkgruppen im Formular haben, dass alle anderen Formularelemente ignoriert werden. Alle fehlenden Funkantworten werden in einem einzelnen Alarm-Popup angezeigt. Hier geht es, ich hoffe es hilft den Menschen. Fehlerbehebungen oder hilfreiche Änderungen sind willkommen :)

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

Beachten Sie dieses Verhalten mit jQuery beim Abrufen von Radioeingabewerten:

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

});

Gibt $('input[name="myRadio"]').val()also nicht den erwarteten Wert des Funkeingangs zurück, wie Sie es erwarten könnten - er gibt den Wert des ersten Optionsfelds zurück.

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

Dies ist eine Dienstprogrammfunktion, die ich erstellt habe, um dieses Problem zu lösen

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

Dies gilt für Optionsfelder mit demselben Namen, für die keine JQuery erforderlich ist.

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

Wenn es sich um Kontrollkästchen handelt und wir möchten, dass eine Liste mit aktivierten Kontrollkästchen einen Namen teilt:

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)

nur eine kleine Modifikation von Mark Biek;

HTML QUELLTEXT

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

und Javascript-Code, um zu überprüfen, ob das Optionsfeld ausgewählt ist

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

Es gibt eine sehr ausgefeilte Möglichkeit, zu überprüfen, ob eines der Optionsfelder mit ECMA6 und der Methode aktiviert ist .some().

Html:

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

Und Javascript:

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

let radioButtonsArray = Array.from(htmlNodes);

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

isAnyRadioButtonChecked wird sein true wenn einige der Optionsfelder aktiviert sind und falsewenn keines von beiden aktiviert ist.

Geben Sie alle markierten Elemente im Optionsfeld zurück

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

Mit JQuery können Sie den aktuellen Status der Optionsfelder auch überprüfen, indem Sie das Attribut "überprüft" aktivieren.

Beispielsweise:

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

In diesem Fall können Sie die Schaltflächen überprüfen mit:

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

Dieser Code alarmiert das ausgewählte Optionsfeld, wenn das Formular gesendet wird. Es wurde jQuery verwendet, um den ausgewählten Wert abzurufen.

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

Ich habe den Spread-Operator verwendet und einige , um zu überprüfen, ob mindestens ein Element im Array den Test besteht.

Ich teile für wen Sorge.

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

Hier ist die Lösung, die erweitert wurde, um die Übermittlung nicht fortzusetzen und eine Warnung zu senden, wenn die Optionsfelder nicht aktiviert sind. Dies würde natürlich bedeuten, dass Sie sie zunächst deaktivieren müssen!

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

Denken Sie daran, die ID ('radio1', 'radio2' oder wie auch immer Sie sie genannt haben) im Formular für jedes der Optionsfelder festzulegen, da sonst das Skript nicht funktioniert.

Ein Beispiel:

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

Die Form

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

Das Skript

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

Die Geige: http://jsfiddle.net/PNpUS/

Ich möchte nur sicherstellen, dass etwas ausgewählt wird (mit 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;
}

Wenn Sie Vanille-JavaScript möchten, Ihr Markup nicht durch Hinzufügen von IDs auf jedem Optionsfeld überladen möchten und sich nur für moderne Browser interessieren , ist der folgende funktionale Ansatz für mich etwas geschmackvoller als eine for-Schleife:

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

Wenn beides nicht aktiviert ist, wird es zurückgegeben undefined(obwohl Sie die obige Zeile ändern können, um etwas anderes zurückzugeben, z. B. um falsezurückgegeben zu werden, können Sie die entsprechende Zeile oben ändern in:}).pop() || {value:false}).value; .

Es gibt auch den zukunftsweisenden Polyfill-Ansatz, da die RadioNodeList- Schnittstelle es einfach machen sollte, nur eine valueEigenschaft in der Liste der untergeordneten Formular-Radioelemente (im obigen Code als formElement[radioName]) zu verwenden, aber das hat seine eigenen Probleme: Wie man RadioNodeList polyfill ?

Dies funktioniert auch, indem vermieden wird, dass eine Element-ID aufgerufen wird, sondern dass sie als Array-Element verwendet wird.

Der folgende Code basiert auf der Tatsache, dass ein Array, das als Radiobuttons-Gruppe bezeichnet wird, aus Radiobuttons-Elementen in derselben Reihenfolge besteht, in der sie im HTML-Dokument deklariert wurden:

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

Geben Sie Optionsfelder mit demselben Namen, aber unterschiedlichen IDs ein.

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