Как проверить, выбран ли переключатель с помощью JavaScript?

У меня есть два переключателя в HTML-форме. Появится диалоговое окно, когда одно из полей равно null. Как проверить, выбран ли переключатель?

ОТВЕТЫ

Ответ 1

Предположим, что у вас есть такой HTML

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

Для проверки на стороне клиента здесь есть несколько Javascript, чтобы проверить, какой из них выбран:

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

Вышеуказанное может быть сделано более эффективно в зависимости от точной природы вашей разметки, но этого должно быть достаточно, чтобы вы начали.

Если вы хотите посмотреть, выбрана ли любая радио кнопка в любом месте, PrototypeJS упрощает процесс.

Здесь функция, которая вернет true, если хотя бы одна радиокнопка выбрана где-то на странице. Опять же, это может потребоваться изменить в зависимости от вашего конкретного HTML.

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

Для проверки на стороне сервера (помните, что вы не можете полностью зависеть от Javascript для проверки!), это будет зависеть от вашего языка выбора, но вы бы проверили значение gender строки запроса.

Ответ 2

С jQuery это будет что-то вроде

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

Позвольте мне разбить это на части, чтобы накрыть его более четко. jQuery обрабатывает объекты слева направо.

input[name=gender]:checked
  • input ограничивает его входными тегами.
  • [name=gender] ограничивает его тегами с именем gender в предыдущей группе.
  • :checked ограничивает его флажками/переключателями, выбранными в предыдущей группе.

Если вы хотите вообще этого избежать, отметьте один из переключателей в виде кода (checked="checked") в коде HTML, что гарантирует, что всегда будет выбран один переключатель.

Ответ 3

Ванильный JavaScript-способ

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

Ответ 4

Просто пытаюсь улучшить решение Russ Cam с помощью сабвуфера CSS, брошенного с ванильным JavaScript.

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

Никакой реальной потребности в jQuery здесь, querySelectorAll широко поддерживается достаточно сейчас.

Изменить: исправлена ​​ошибка с селектором css, я включил кавычки, хотя вы можете их опустить, в некоторых случаях вы не можете так лучше оставить их.

Ответ 5

Код HTML

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

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

Ответ 6

Скрипты на этой странице помогли мне придумать script ниже, что я считаю более полным и универсальным. В основном он будет проверять любое количество радиокнопок в форме, что означает, что он будет следить за тем, чтобы была выбрана опция радио для каждой из разных групп радио в форме. например, в тестовой форме ниже:

   <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 script гарантирует, что перед отправкой ответ будет дан как для "test1", так и "test2". Вы можете иметь столько групп радио в форме и игнорировать любые другие элементы формы. Все отсутствующие радио ответы будут отображаться внутри одного всплывающего окна предупреждения. Вот оно, я надеюсь, что это помогает людям. Любые исправления ошибок или полезные модификации приветствуются:)

<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

Вы можете использовать этот простой script. У вас может быть несколько переключателей с одинаковыми именами и разными значениями.

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

Ответ 8

Обратите внимание на это поведение wit jQuery при получении значений радиовхода:

$('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 value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Итак, $('input[name="myRadio"]').val() не возвращает проверенное значение радиовхода, как и следовало ожидать - оно возвращает первое значение переключателя.

Ответ 9

это утилита, которую я создал для решения этой проблемы.

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

Ответ 10

Это будет справедливо для переключателей, имеющих одно и то же имя, без необходимости JQuery.

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

Ответ 11

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

Ответ 12

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

Ответ 13

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

Ответ 14

С помощью JQuery еще один способ проверить текущий статус переключателей - получить атрибут "checked".

Пример:

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

В этом случае вы можете проверить кнопки, используя:

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

Ответ 15

Этот код будет предупреждать выбранный переключатель при отправке формы. Он использовал jQuery для получения выбранного значения.

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

Ответ 16

Существует очень сложный способ проверить, проверяются ли какие-либо из переключателей с помощью ECMA6 и метода .some().

Html:

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

И JavaScript

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

let radioButtonsArray = Array.from(htmlNodes);

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

isAnyRadioButtonChecked будет иметь значение true если некоторые переключатели отмечены, и false если ни одна из них не отмечена.

Ответ 17

только небольшая модификация для Марка Бика;

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>

и Javascript, чтобы проверить, выбран ли переключатель

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

Ответ 18

Вот решение, которое расширяется, чтобы не идти вперед с отправкой и отправлять предупреждение, если радиокнопки не отмечены. Конечно, это означало бы, что вы должны отключить их для начала!

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

Не забудьте установить id ('radio1', 'radio2' или все, что вы его назвали) в форме для каждой из переключателей или script не будет работать.

Ответ 19

Пример:

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

Ответ 20

Форма

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

script

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

Скрипка: http://jsfiddle.net/PNpUS/

Ответ 21

Я просто хочу, чтобы что-то выбиралось (используя 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;
}

Ответ 22

Если вы хотите использовать ванильный JavaScript, не хотите загромождать свою разметку, добавляя идентификаторы на каждом переключателе, а заботиться только о современных браузерах, следующий функциональный подход для меня немного более со вкусом чем цикл for:

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

Если ни один из них не установлен, он вернет undefined (хотя вы можете изменить строку выше, чтобы вернуть что-то еще, например, чтобы вернуть false, вы можете изменить соответствующую строку выше: }).pop() || {value:false}).value;).

Существует также перспективный подход polyfill, поскольку интерфейс RadioNodeList должен упростить использование value в списке форм дочерних радиоэлементов (найдено в приведенном выше коде как formElement[radioName]), но у него есть свои проблемы: Как polyfill RadioNodeList?

Ответ 23

Это также работает, избегая вызова идентификатора элемента, но вызывающего его, используя в качестве элемента массива.

Следующий код основан на том факте, что массив, названный как группа радиообъектов, состоит из элементов радиообъектов в том же порядке, что и они, объявленные в документе html:

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

Ответ 24

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

Ответ 25

Вернуть все отмеченные элементы в переключатель

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

Ответ 26

Дайте радиокнопки с одинаковым именем, но с разными идентификаторами.

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