我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何查看单选按钮是否被选中?


当前回答

下面是扩展后的解决方案,即不继续提交,并在未选中单选按钮时发送警报。当然,这意味着你必须在一开始就不检查它们!

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

只要记住在每个单选按钮的表单中设置id ('radio1','radio2'或任何你叫它的名字),否则脚本将无法工作。

其他回答

一个例子:

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; 
} 

给单选按钮,相同的名称,但不同的id。

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;
   }
}

基本上,这段代码所做的就是遍历一个包含所有输入元素的nodeList。如果这些输入元素中的一个是radio类型并被检查,那么就执行一些操作并打破循环。

如果循环没有检测到被选中的输入元素,所选的布尔变量将保持false,并且应用条件语句,我们可以在这种情况下执行一些东西。

let inputs = document.querySelectorAll('input') let btn = document.getElementById('btn') let selected = false function check(){ for(const input of inputs){ if(input.type === 'radio' && input.checked){ console.log(`selected: ${input.value}`) selected = true break } } if(!selected) console.log(`no selection`) } btn.addEventListener('click', check) <input type="radio" name="option" value="one"> <label>one</label> <br> <input type="radio" name="option" value="two"> <label>two</label> <br> <br> <button id="btn">check selection</button>

让我们假设你有这样的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进行验证!),这取决于您所选择的语言,但是您可以检查请求字符串的性别值。

对于jQuery,它就像这样

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

让我把它分解成几部分,以便更清楚地解释。 jQuery从左到右处理事物。

input[name=gender]:checked

Input将其限制为输入标记。 [name=gender]将其限制为前一组中具有名称性别的标签。 :checked将其限制为前一组中选中的复选框/单选按钮。

如果您希望完全避免这种情况,可以在HTML代码中将其中一个单选按钮标记为已选中(checked="checked"),这将确保始终选中一个单选按钮。