Как получить значение выбранного переключателя в Microsoft Edge? - PullRequest
Новая
       31

Как получить значение выбранного переключателя в Microsoft Edge?

0 голосов
/ 19 июня 2019

Мне нужно получить значение выбранной радиокнопки из группы радиокнопок. Приведенный ниже код работает в Chrome. Я могу использовать свойство value на входе, однако в Edge и IE свойство myRadio отсутствует.

Есть ли хорошая кросс-браузерная альтернатива для получения значения выбранного переключателя с использованием простого javascript? 

function test(){
  //prints selected button's value on chrome while undefined on Edge
  console.log(document.getElementById("myForm").myRadio.value);
}
<form id="myForm">
  <input type="radio" name="myRadio" value="0" />
  <input type="radio" name="myRadio" value="1" />
  <input type="radio" name="myRadio" value="2" />
</form>
<button onClick="test()">Test</button>

Ответы [ 4 ]

2 голосов
/ 19 июня 2019

Просто выберите единственный, который имеет атрибут «флажок»: 

function test(){
  //prints selected button's value on chrome while undefined on Edge
  console.log(document.querySelector('input[name="myRadio"]:checked').value);
}
<form id="myForm">
  <input type="radio" name="myRadio" value="0" />
  <input type="radio" name="myRadio" value="1" />
  <input type="radio" name="myRadio" value="2" />
</form>
<button onClick="test()">Test</button>
1 голос
/ 19 июня 2019

Кажется, что Edge возвращает HtmlCollection вместо RadioNodeList.

Результат document.getElementById ("myForm"). MyRadio in:

EDGE 

HtmlCollection length="3">
<input name="myRadio" type="radio" value="0"></input>
<input name="myRadio" type="radio" value="1"></input>
<input name="myRadio" type="radio" value="2"></input>
</HtmlCollection>

Chrome 

RadioNodeList(3) [input, input, input, value: "1"]
0: input
1: input
2: input
length: 3
value: "1"

Вы можете попробовать: использовать: флажок

console.log (document.querySelector ('input [name = "myRadio"]: флажок'). Значение);

1 голос
/ 19 июня 2019

Я думаю, что выборщик запросов должен нормально работать во всех браузерах. 

function test(){
  //prints selected button's value on chrome while undefined on Edge
  console.log(document.querySelector('#myForm input[name="myRadio"]:checked').value);
}
<form id="myForm">
  <input type="radio" name="myRadio" value="0" />
  <input type="radio" name="myRadio" value="1" />
  <input type="radio" name="myRadio" value="2" />
</form>
<button onClick="test()">Test</button>
0 голосов
/ 19 июня 2019

Вы можете попробовать использовать следующие методы:

Метод 1: использование метода document.querySelector (): 

    function test() {
        //prints selected button's value on chrome while undefined on Edge
        console.log(document.querySelector("input[name = 'myRadio']:checked").value);
    }

Метод 2: Использование метода document.getElementsByName () для получениясписок радио, затем проверьте, какое радио проверено: 

    function test() {
        //prints selected button's value on chrome while undefined on Edge

        var radioes = document.getElementsByName('myRadio');
        var selectedvalue;
        for (var i = 0; i < radioes.length; i++) {
            if (radioes[i].checked) {
                selectedvalue = radioes[i].value;
            }
        }
        console.log(selectedvalue);
    }

Метод 3: Добавьте ссылку JQuery, используя селектор JQuery, чтобы получить проверенное значение:

Ссылка JQuery: 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Метод Javascript: 

    function test() {
        //prints selected button's value on chrome while undefined on Edge

        console.log($("input:radio[name='myRadio']:checked").val());
    }
...