Как получить значение значка переключателя в javascript

Question

У меня есть набор переключателей. Я пытаюсь получить проверенное значение переключателя с помощью java-скрипта. Но у меня ошибка с нечетким идентификатором. Я делаю следующий код в html 5. Я не получаю значение.

function timeout() 
    { 
     if (document.getElementById["RadioButton1"].checked) 
     { 
      choice = document.getElementById["RadioButton1"].value; 
      alert('choice'); 

     } 

    if (document.getElementById["RadioButton2"].checked) 
     { 
      choice = document.getElementById["RadioButton2"].value; 
      alert('choice'); 
     } 
    if (document.getElementById["RadioButton3"].checked) 
     { 
     choice = document.getElementById["RadioButton3"].value; 
     alert('choice'); 

     } 
    if (document.getElementById["RadioButton4"].checked) 
     { 
      choice = document.getElementById["RadioButton4"].value; 
      alert('choice'); 
     } 
    var c = document.getElementById("label1").value; 
} 

Answer 1

Основная проблема, наблюдаемая с вашего кода, - синтаксическая ошибка.

document.getElementById это метод, а не объект, так что вы должны назвать его круглыми скобками:

// --------------------v--------------v 
document.getElementById("RadioButton1").value 

Answer 2

Надеется, что это помогает приятелю.

$("input").on("click", function() { 
alert($("input:checked").val() + " is checked!"); 
}); 

Fiddle

Answer 3

Набор переключателей все должны иметь такое же имя. Так что множество, найти проверенную один и прочитать его значение:

function getValue(name) { 
    var rbs = document.getElementsByName(name); 

    for (var i=0, iLen=rbs.length, i<iLen; i++) { 

    if (rbs[i].checked) { 
     return rbs[i].value; 
    } 
    } 
} 

Если элементы управления находятся в форме (которую обычно) и у вас есть ссылка на форму, вы можете получить набор с помощью:

var rbs = formRef[name]; 

Answer 4

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

<input type="radio" id="RadioButton1" name="radio_group" value="1"/> 
<input type="radio" id="RadioButton2" name="radio_group" value="2"/> 
<input type="radio" id="RadioButton3" name="radio_group" value="3"/> 

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

var Val = $("input[name=radio_group]:checked").val(); 

Answer 5

$(document).ready(function(){ 
 
\t \t $('#btnsubmit').click(function(){ 
 
      var result = $('input[type="radio"]:checked'); 
 
      if (result.length > 0) { 
 
\t \t \t $('#result').html(result.val()+" is Checked"); 
 
\t \t }else{ 
 
\t \t \t $('#result').html(" No radio button is Checked"); 
 
\t \t } 
 
     }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<input type="radio" name="gender" value="Male"> Male 
 
<input type="radio" name="gender" value="Female"> Female 
 
<input type="submit" id="btnsubmit" value="submit"> 
 
<div id="result"></div>

Answer 6

Это анс для @yogi комментарий ( , как можно реализовать то же самое для флажков?)

$(document).ready(function(){ 
 
    \t \t $('#btnsubmit').click(function(){ 
 
       var result = $('input[type="checkbox"]:checked'); 
 
       if (result.length > 0) { 
 
       \t var resultstring = result.length +"checkboxes checked <br>"; 
 
       \t result.each(function(){ 
 
       \t \t resultstring += $(this).val()+" <br>"; //append value to exsiting var 
 
       \t }); 
 
    \t \t \t $('#result').html(resultstring); 
 
    \t \t }else{ 
 
    \t \t \t $('#result').html(" No checkbox is Checked"); 
 
    \t \t } 
 
      }); 
 
    \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<input type="checkbox" name="skill" value="Java"> Java 
 
    <input type="checkbox" name="skill" value="Jquery"> Jquery 
 
    <input type="checkbox" name="skill" value="PHP"> PHP 
 
    <input type="submit" id="btnsubmit" value="submit"> 
 
    <div id="result"></div>