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

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

14.09.2009 20:35:10
эта ссылка может помочь вам stackoverflow.com/questions/6654601/...
Ahmed Elbendary 29.10.2018 10:13:04
26 ОТВЕТОВ

Давайте представим, что у вас есть такой 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значение строки запроса.

328
12.09.2013 06:37:22
но то, что я хочу проверить, если переключатель выбран независимо от того, что выбрано.
noob 14.09.2009 20:39:31
Я действительно не понимаю, что вы говорите? Заинтересованы в том, выбран ли ЛЮБОЙ переключатель?
Mark Biek 14.09.2009 20:41:00
да. потому что форму нельзя отправить, если заполнены не все поля, включая переключатели.
noob 14.09.2009 20:42:41
if (document.getElementById ('sex_Male'). Check || document.getElementById ('sex_Female'). check) alert ('некоторые из моих радиобоксов проверены');
Havenard 14.09.2009 20:44:32
Я изменил свой пример Prototype, чтобы использовать урок CSS-селектора, который я только что выучил у Р. Бемроуза.
Mark Biek 14.09.2009 20:54:40

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

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

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

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

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

110
14.09.2009 20:57:22
-1 за предложение библиотеки, когда ее не спрашивают. Таким образом, мы могли бы ответить на все вопросы «включите библиотеку x, используйте x.doWhatYouNeed ()». Никакого пламени не было, я искренне считаю, что на этот вопрос нужно ответить с помощью чистого javascript (а затем, в конце концов, указать, как проще с библиотекой)
Riccardo Galli 21.09.2012 14:16:26
@RiccardoGalli: Многие люди уже используют jQuery, поэтому ответ начинается с «С jQuery, это было бы что-то вроде», если они уже использовали его.
Powerlord 21.09.2012 17:30:51
Кто-нибудь знает, можно ли цепочки селекторов, как это? введите [имя = пол] [тип = радио] или введите [имя = пол, тип = радио] только для дополнительной проверки?
Ty_ 17.11.2015 15:26:30
@ EW-CodeMonkey Первый способ, который вы упомянули, должен работать .
Powerlord 17.11.2015 16:56:51

Ванильный 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;       
    }
}
81
14.09.2009 21:29:28
Ну, у меня сейчас почти такая же проблема, и ваш код был очень полезным
MoreThanChaos 26.11.2009 07:00:45
Это даст вам значение последней проверенной радиокнопки. Если у вас есть несколько радиогрупп, это, вероятно, не даст вам правильное значение.
styfle 5.10.2012 16:44:59
@styfle Это прекрасно работает для вопроса ОП, где он утверждает, что на странице есть только две радиокнопки. Решение было бы другим для другого сценария проблемы, например, более двух переключателей, нескольких групп радио и т. Д. :)
Russ Cam 6.10.2012 06:49:20
@RussCam Да, это работает для крошечной страницы только с двумя переключателями, но я добавил свой комментарий, чтобы завершить ответ. Лучший способ получить элементы переключателя был бы name.
styfle 9.10.2012 20:35:22
Лучшим способом было бы выбрать радиоэлементы по определенному классу, а затем сгруппировать разные группы радиоэлементов в разные классы. В противном случае это решение будет работать только для одной группы радиоэлементов без других элементов формы ввода.
Oliver 8.08.2016 11:15:30

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

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>
1
19.02.2018 09:13:00
getElementsByName () возвращает HTMLCollection, у которого не было бы отмеченного свойства, поэтому я не верю, что размещенный вами фрагмент JavaScript будет работать как задумано. Вы должны были бы перебрать элементы в HTMLCollection и посмотреть, проверены ли какие-либо из них, как предлагали другие.
Rudi 10.07.2012 01:46:14
Спасибо. Вы правы. :) Обновил мой ответ, чтобы больше людей не получали неверную информацию.
Parag 11.07.2012 05:55:16

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");
}
11
11.06.2014 10:41:20
Предупреждение: этот код возвращает всплывающее предупреждение, как только страница загружается.
samthebrand 16.02.2013 02:47: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 "";
}
1
4.08.2012 17:51:01

это служебная функция, которую я создал, чтобы решить эту проблему

    //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;
            }
        }
    }
3
15.10.2012 16:40:56
Как это потому, что его (ре) удобство использования и простота. Кроме того, возвращаемое значение может быть обработано хорошим оператором switch.
JGurtz 29.04.2014 23:29:00

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

   <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>
9
29.11.2012 11:42:28

В JQuery еще один способ проверить текущее состояние переключателей - получить атрибут «флажок».

Например:

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

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

if ($("#gender_male").attr("checked") == true) {
...
}
1
24.01.2013 11:41:07
В моем случае значением $("#gender_male").attr("checked")является строка, "checked"а не логическое значение.
Koks_rs 5.02.2016 10:49:03

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

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

Просто не забудьте установить идентификатор («radio1», «radio2» или как вы его называли) в форме для каждой из кнопок радио, иначе скрипт не будет работать.

0
26.01.2013 15:57:32
Вы можете просто сделать: if (!document.getElementById('radio1').checked && !document.getElementById('radio2').checked) { alert(); }.
insertusernamehere 26.01.2013 16:00:32

Пример:

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; 
} 
0
21.03.2013 08:06:22

Форма

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

Сценарий

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

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

0
16.04.2013 12:06: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;
   }
}
-2
19.02.2018 09:15:16

Я просто хочу убедиться, что что-то выбрано (используя 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;
}
0
20.05.2013 18:39:53

Если вы хотите использовать ванильный 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;.

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

0
23.05.2017 12:03:05

Обратите внимание на это поведение при использовании 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()не возвращает проверенное значение радиовхода, как вы могли бы ожидать - оно возвращает значение первой радиокнопки.

6
13.11.2013 22:56:41

Это будет действительно для переключателей с одинаковым именем, 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 });
3
1.09.2014 14:49:39

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

ЯШ:

// 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)
4
3.10.2014 12:27:01
// Проверяем, выбрано ли что-то в радиогруппе, если ($$ ('input [name = radiosname]: checked'). Length> 0) было именно то, что мне нужно
Steve Johnson 7.03.2015 22:42:10

Этот код предупредит выбранный переключатель при отправке формы. Он использовал 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>

1
8.04.2015 15:09:33

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

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

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

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

15
23.05.2017 11:47:19
может быть, это должно быть var radios = document.querySelectorAll ('input [type = "radio"]: флажок');
Md. Shafiqur Rahman 16.07.2016 11:17:49
@ShafiqurRahman вы абсолютно правы, я обновлю свой ответ, я не думаю, что вам нужны цитаты вокруг радио.
Matt McCabe 18.07.2016 19:29:05
+1 для ванильного JavaScript. Я всегда использовал бы кавычки вокруг значений атрибутов, поскольку для некоторых других значений атрибутов (таких как a[href^="http://"]) они были бы необходимы, и согласованность более удобна в обслуживании. Кроме того, это позволяет объявлению атрибута соответствовать соответствующему HTML.
Manngo 22.07.2016 04:07:06

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

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

if(!document.yourformname.yourradioname[0].checked 
   && !document.yourformname.yourradioname[1].checked){
    alert('is this working for all?');
    return false;
}
0
15.01.2016 18:35:58
if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)
3
1.10.2016 10:49:56

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>

Java-script

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;
}
0
7.03.2017 06:34:30

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

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.
}
10
5.11.2017 15:09:05

Существует очень сложный способ проверить, проверены ли какие-либо из переключателей с помощью 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если ни одна из них не отмечена.

2
8.05.2019 08:05:33

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

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);
2
22.06.2019 05:40:17