Как получить выбранное значение переключателя с помощью js

Question

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

var mailcopy = document.getElementById('mailCopy').value; 

Как получить текущее выбранное значение радиокнопки, используя Javascript?

Answer 1

HTML

<p>Gender</p>
<input type="radio" id="gender0" name="gender" value="Male">Male<br>
<input type="radio" id="gender1" name="gender" value="Female">Female<br>

JS

var gender = document.querySelector('input[name = "gender"]:checked').value;
document.writeln("You entered " + gender + " for your gender<br>");

Answer 2

Если вы используете jQuery, следующий код будет работать для вас.

$('input[name=radioName]:checked').val();

Answer 3

Радиокнопки входят в группы с одинаковыми именами и разными идентификаторами, для одного из них свойство check будет установлено в значение true, поэтому перебирайте их, пока не найдете.

function getCheckedRadio(radio_group) {
    for (var i = 0; i < radio_group.length; i++) {
        var button = radio_group[i];
        if (button.checked) {
            return button;
        }
    }
    return undefined;
}
var checkedButton = getCheckedRadio(document.forms.frmId.elements.groupName);
if (checkedButton) {
    alert("The value is " + checkedButton.value);
}

Answer 4

Может быть, я что-то здесь упускаю, но старый добрый стандартный JS не сработает? Я имею в виду:

var selectedOption = document.getElementById('your-form-name')['radio-group-name'].value;

... который действителен, конечно, только если предоставил «значение» для ваших элементов радиовхода.

<input type="radio" name="radio-group-name" value="red" checked>
<input type="radio" name="radio-group-name" value="blue">

Значение должно быть красным или синим в приведенном выше примере.

Answer 5

отметьте это

<input class="gender" type="radio" name="sex" value="male">Male
<br>
<input class="gender" type="radio" name="sex" value="female">Female


<script type="text/javascript">
$(document).ready(function () {
$(".gender").change(function () {

    var val = $('.gender:checked').val();
    alert(val);
});
});

</script>

Пример

Answer 6

function getCheckedValue(radioObj, name) {

    for (j = 0; j < radioObj.rows.length; ++j) {
        for (k = 0; k < radioObj.cells.length; ++k) {
            var radioChoice = document.getElementById(name + "_" + k);
            if (radioChoice.checked) {
                return radioChoice.value;
            }
        }
    }
    return "";
}

Answer 7

Более простой способ сделать это - использовать глобальную переменную js, которая просто содержит идентификатор переключаемой кнопки. Тогда вам не нужно тратить код, крутящийся по спискам радиостанций в поисках выбранного значения. Я сделал это в тех случаях, когда у меня есть динамически генерируемый список из 100 или более переключателей. вращение через них происходит (почти незаметно) медленно, но это более простое решение.

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

<script>
var gRadioValue = ''; //global declared outside of function
function myRadioFunc(){
    var radioVal = gRadioValue;  
    // or maybe: var whichRadio = document.getElementById(gWhichCheckedId);
    //do somethign with radioVal
}
<script>

<input type="radio" name="rdo" id="rdo1" value="1" onClick="gRadioValue =this.value;"> One
<input type="radio" name="rdo" id="rdo2" value="2" onClick="gRadioValue =this.value;"> Two
...
<input type="radio" name="rdo" id="rdo99" value="99" onClick="gRadioValue =this.value;"> 99

Answer 8

Вы можете сделать что-то очень похожее на ответ Бинца, но вместо использования идентификаторов используйте классы для уменьшения избыточности.

function getSelectedValue() {
  var radioBtns = document.getElementsByClassName("radioBtn");
  for(var i = 0; i < radioBtns.length; i++){
    if(radioBtns[i].checked){
      document.getElementById("output").textContent = radioBtns[i].value; 
    }
  }
}

<input class="radioBtn" type="radio" name="order" value="button1" />Button 1<br>
<input class="radioBtn" type="radio" name="order" value="button2" />Button 2<br>
<input class="radioBtn" type="radio" name="order" value="button3" />Button 3<br>
<button onclick="getSelectedValue();">Get Value of Selected Radio</button><br>
<textarea id="output"></textarea>

Answer 9

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

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

function createOutput() {
  var order = "in";
  if (document.getElementById('radio1').checked == true) {
    order = "pre";
  } else if (document.getElementById('radio2').checked == true) {
    order = "in";
  } else if (document.getElementById('radio3').checked == true) {
    order = "post";
  }
  document.getElementById('outputBox').innerHTML = order;
}

<input id="radio1" type="radio" name="order" value="preorder" />Preorder
<input id="radio2" type="radio" name="order" value="inorder" checked="true" />Inorder
<input id="radio3" type="radio" name="order" value="postorder" />Postorder
<button onclick="createOutput();">Generate Output</button>
<textarea id="outputBox" rows="10" cols="50"></textarea>

Надеюсь, что это полезно, в некотором роде,

Beanz

Answer 10

Хи, ты должен сделать это так.

function checkRadio () {
    if(document.getElementById('user1').checked) {
        return $('#user1').val();
    }else if(document.getElementById('user2').checked) {
        return $('#user2').val();
    }
}