按钮单击显示当无线电值更改时单选按钮值不起作用

Question

我正在使用按钮点击内联javascript来显示单选按钮值。但即使我更改了值

，它也是always showing English

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="English" checked="checked">English &nbsp;&nbsp;

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Tamil">Tamil &nbsp;&nbsp;
<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alert(document.getElementById('LanguageSelect').value);" />

我的要求是，需要显示选择了哪个收音机！

Answer 1

请更改元素的ID，然后根据值显示元素。

否则，DOM本身无法做到这一点。

解决方案

从HTML中删除id="LanguageSelect"，因为即使检查了其他内容，当前元素仍将具有id属性。以下是您的代码示例：

以下是我测试代码的小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/q25ba/

因此，一旦删除它，您就可以解决问题。

当您选择该值时，它会查找第一个元素，它将具有英语值，并会发出警告！

您可以使用jQuery或检查元素的检查：

的jQuery

$('input[type=radio]:checked').val(); // check for the checked radio

这很简单！我会推荐你​​这个。

但是，如果您想使用JavaScript获取单选按钮的值，请尝试以下操作：

的JavaScript

/* this event to get triggered on click */
function checkCheckness () {
   var radioButton = document.getElementsByName("LanguageSelect");
   /* always remember, name should be similar, ID MUST NEVER be similar
    * using similar ID among different elements is illegal in HTML */
   if(radioButton[0].checked) {
      alert(radioButton[0].value);
   }
   /* add some else statements */
}

Answer 2

如果您只有三个选项，则以下解决方案是合理的：

<input type="radio" name="LanguageSelect"  id="LanguageSelect1" value="English" checked="checked">English &nbsp;&nbsp;

<input type="radio" name="LanguageSelect"  id="LanguageSelect2" value="Tamil">Tamil &nbsp;&nbsp;
<input type="radio" name="LanguageSelect"  id="LanguageSelect3" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />

然后在脚本中定义alertValue函数。

alertValue = function(){
    var language1 = document.getElementById('LanguageSelect1');
    var language2 = document.getElementById('LanguageSelect2');
    var language3 = document.getElementById('LanguageSelect3');

    if(language1.checked)
        alert(language1.value);
    if(language2.checked)
        alert(language2.value);
    if(language3.checked)
        alert(language3.value);
}

请检查此Fiddle。我已经测试了这个解决方案。

如果您在使用其他方式选择元素时没有问题，那么另一种方法如下：

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="English" checked="checked">English &nbsp;&nbsp;

<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Tamil">Tamil &nbsp;&nbsp;
<input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />

和相应的js函数：

alertValue = function(){
    var radios = document.getElementsByTagName("input");

    for (var i=0;i<radios.length;i++)
        if (radios[i].checked)
            alert(radios[i].value);

}

请检查此FiddleV2。我已经测试了这个解决方案。

Answer 3

                    <input type="radio" name="LanguageSelect"  id="LanguageSelect" value="English" checked="checked">English &nbsp;&nbsp;

                    <input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Tamil">Tamil &nbsp;&nbsp;
                    <input type="radio" name="LanguageSelect"  id="LanguageSelect" value="Hindi">Hindi</div><br>
                    <input type="button" class="button5" value="Continue" onclick="clickable()" />

                    function clickable(){

                    var val=document.querySelector('input[name="LanguageSelect"]:checked').value;

                    alert(val);
                    }

Answer 4

我自己做了......

    onclick='if(document.getElementById(\'LanguageSelect1\').checked==true)
{alert(document.getElementById(\'LanguageSelect1\').value);} 
if(document.getElementById(\'LanguageSelect2\').checked==true)
{alert(document.getElementById(\'LanguageSelect2\').value);} 
if((document.getElementById(\'LanguageSelect3\').checked==true) 
{alert(document.getElementById(\'LanguageSelect3\').value);}'