Hoe kan ik controleren of een keuzerondje is geselecteerd met JavaScript?

Ik heb twee keuzerondjes in een HTML-formulier. Er verschijnt een dialoogvenster wanneer een van de velden null is. Hoe kan ik controleren of een keuzerondje is geselecteerd?

Antwoord 1, autoriteit 100%

Laten we doen alsof je HTML hebt zoals deze

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

Voor validatie aan de clientzijde, hier is wat Javascript om te controleren welke is geselecteerd:

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

Het bovenstaande kan efficiënter worden gemaakt, afhankelijk van de exacte aard van uw opmaak, maar dat zou voldoende moeten zijn om u op weg te helpen.

Als je wilt zien of eenkeuzerondje overalop de pagina is geselecteerd, PrototypeJSmaakt het heel gemakkelijk.

Hier is een functie die true retourneert als ergens op de pagina ten minste één keuzerondje is geselecteerd. Nogmaals, dit moet mogelijk worden aangepast, afhankelijk van uw specifieke HTML.

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

Voor validatie aan de serverzijde (onthoud dat u voor validatie niet volledig op Javascript kunt vertrouwen!), hangt dit af van de taal van uw keuze, maar u hoeft alleen de genderwaarde van de verzoekstring.

Antwoord 2, autoriteit 34%

Met jQueryzou het zoiets zijn als

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

Laat me dat opsplitsen in stukjes om het duidelijker te dekken.
jQuery verwerkt dingen van links naar rechts.

input[name=gender]:checked

1. inputbeperkt het tot invoertags.
2. [name=gender]beperkt het tot tags met de naam geslacht binnen de vorige groep.
3. :checkedbeperkt het tot selectievakjes/keuzerondjes die geselecteerd in de vorige groep.

Als je dit helemaal wilt vermijden, markeer dan een van de keuzerondjes als aangevinkt (checked="checked") in de HTML-code, zodat er altijd één keuzerondje is geselecteerd.

Antwoord 3, autoriteit 24%

Een vanille JavaScript-manier

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

Antwoord 4, autoriteit 4%

U kunt dit eenvoudige script gebruiken.
Mogelijk hebt u meerdere keuzerondjesmet dezelfde namen en verschillende waarden.

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

Antwoord 5, autoriteit 3%

HTML-code

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

Antwoord 6, autoriteit 3%

De scripts op deze pagina hebben me geholpen om het onderstaande script te bedenken, waarvan ik denk dat het completer en universeler is. In principe valideert het een willekeurig aantal keuzerondjes in een formulier, wat betekent dat het ervoor zorgt dat een keuzerondje is geselecteerd voor elk van de verschillende radiogroepen in het formulier. bijvoorbeeld in het onderstaande testformulier:

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

Het RadioValidator-script zorgt ervoor dat er een antwoord is gegeven voor zowel ‘test1’ als ‘test2’ voordat het wordt verzonden. U kunt zoveel radiogroepen in het formulier hebben en alle andere formulierelementen worden genegeerd. Alle ontbrekende radio-antwoorden worden weergegeven in een enkele waarschuwingspop-up. Hier gaat het, ik hoop dat het mensen helpt. Alle bugfixes of nuttige aanpassingen zijn welkom 🙂

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

7, Autoriteit 2%

Opmerking Dit gedrag met jQuery bij het verkrijgen van radio-ingangswaarden:

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

Dus $('input[name="myRadio"]').val()retourneert niet de aangevinkte waarde van de radio-ingang, zoals je zou verwachten — het retourneert de eerste radio waarde van de knop.

Antwoord 8

Er is een zeer geavanceerde manier om te valideren of een van de keuzerondjes is gecontroleerd met ECMA6 en methode .some().

Html:

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

En javascript:

let htmlNodes = document.getElementsByName('status');
let radioButtonsArray = Array.from(htmlNodes);
let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

isAnyRadioButtonCheckedis trueals sommige van de keuzerondjes zijn aangevinkt en falseals geen van beide is aangevinkt.

Antwoord 9

Ik gebruikte spread operator en sommigen om het minste één element te controleren in de array passeert de test.

Ik deel voor wie zorg.

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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 name="teenageMutant">
  <input type="radio" name="ninjaTurtles"/>
</form>

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

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

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

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

[...myForm.sex].filter(r=>r.checked)[0].value

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