我在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.
}

其他回答

对于jQuery,它就像这样

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

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

input[name=gender]:checked

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

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

表单

<form name="teenageMutant">
  <input type="radio" name="ninjaTurtles"/>
</form>

这个脚本

if(!document.teenageMutant.ninjaTurtles.checked){
  alert('get down');
}

小提琴:http://jsfiddle.net/PNpUS/

mootools (http://mootools.net/docs/core/Element/Element)

html:

<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />

js:

// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))

// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)


// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)


// Set second button selected (by id)
$("radiowithval2").set("checked", true)

这对于具有相同名称的单选按钮是有效的,不需要JQuery。

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];

如果我们正在讨论复选框,并且我们想要一个列表,其中选中的复选框共享一个名称:

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });

我只是想确保一些东西被选中(使用jQuery):

// html
<input name="gender" type="radio" value="M" /> Male <input name="gender" type="radio" value="F" /> Female

// gender (required)
var gender_check = $('input:radio[name=gender]:checked').val();
if ( !gender_check ) {
    alert("Please select your gender.");
    return false;
}