我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何查看单选按钮是否被选中?
当前回答
您可以使用这个简单的脚本。 您可以有多个名称相同但值不同的单选按钮。
var checked_gender = document.querySelector('input[name = "gender"]:checked');
if(checked_gender != null){ //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}
其他回答
只是试图改进Russ Cam的解决方案与一些CSS选择器糖扔在香草JavaScript。
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;
这里不需要jQuery, querySelectorAll现在已经得到了足够广泛的支持。
编辑:修正了一个css选择器的错误,我已经包括了引号,虽然你可以省略它们,在某些情况下你不能这样做,所以最好把它们留在。
给单选按钮,相同的名称,但不同的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;
}
}
一个例子:
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;
}
该代码将在提交表单时提醒所选单选按钮。它使用jQuery来获取所选的值。
$("form").submit(function(e) { e.preventDefault(); $this = $(this); var value = $this.find('input:radio[name=COLOR]:checked').val(); alert(value); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input name="COLOR" id="Rojo" type="radio" value="red"> <input name="COLOR" id="Azul" type="radio" value="blue"> <input name="COLOR" id="Amarillo" type="radio" value="yellow"> <br> <input type="submit" value="Submit"> </form>
让我们假设你有这样的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进行验证!),这取决于您所选择的语言,但是您可以检查请求字符串的性别值。