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

Question

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

Answer 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 строки запроса.

Answer 2

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

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

Позвольте мне разбить это на части, чтобы покрыть это более ясно. JQuery обрабатывает вещи слева направо.

input[name=gender]:checked

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

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

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

Answer 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, я включил кавычки, хотя вы можете их опустить, в некоторых случаях вы не можете, поэтому лучше оставить их в.

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

Answer 6

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

   <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 перед отправкой удостоверится, что дан ответ как для '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>

Answer 7

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

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

Answer 8

Обратите внимание на это поведение с 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's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

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

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

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