如何用JavaScript检查单选按钮是否被选中?

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

1346095 次浏览
小开

让我们假设你有这样的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进行验证!)，这取决于你选择的语言，但你必须检查请求字符串的gender值。

小开

对于jQuery，它就像

if ($('input[name=gender]:checked').length > 0) {
// do something here
}
让我把它分解成碎片，以便更清楚地覆盖它。 jQuery从左到右处理事物 
input[name=gender]:checked
  1. input将其限制为输入标记。
  2. [name=gender]将其限制为前一组中具有名称性别的标记。
  3. :checked将其限制为在前一组中选择的复选框/单选按钮。

如果你想完全避免这种情况，在HTML代码中标记一个单选按钮为选中(checked="checked")，这将保证一个单选按钮总是被选中。

小开

一种简单的JavaScript方式

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
if (radios[i].type === 'radio' && radios[i].checked) {
// get value, set checked flag or do whatever you need to
value = radios[i].value;
}
}
小开

只是对马克·比克做了一点点修改;

HTML CODE 

<form name="frm1" action="" method="post">
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" / >
<input type="button" value="test"  onclick="check1();"/>
</form>

和Javascript代码来检查单选按钮是否被选中

<script type="text/javascript">
function check1() {
var radio_check_val = "";
for (i = 0; i < document.getElementsByName('gender').length; i++) {
if (document.getElementsByName('gender')[i].checked) {
alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
radio_check_val = document.getElementsByName('gender')[i].value;
}
}
if (radio_check_val === "")
{
alert("please select radio button");
}
}
</script>
小开

HTML代码

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

Javascript代码:

var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
if(off_payment_method[i].checked) {
ischecked_method = true;
break;
}
}
if(!ischecked_method)   { //payment method button is not checked
alert("Please choose Offline Payment Method");
}
小开

http://www.somacon.com/p143.php/

function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
小开

这是我为了解决这个问题而创建的效用函数

    //define radio buttons, each with a common 'name' and distinct 'id'.
//       eg- <input type="radio" name="storageGroup" id="localStorage">
//           <input type="radio" name="storageGroup" id="sessionStorage">
//param-sGroupName: 'name' of the group. eg- "storageGroup"
//return: 'id' of the checked radioButton. eg- "localStorage"
//return: can be 'undefined'- be sure to check for that
function checkedRadioBtn(sGroupName)
{
var group = document.getElementsByName(sGroupName);


for ( var i = 0; i < group.length; i++) {
if (group.item(i).checked) {
return group.item(i).id;
} else if (group[0].type !== 'radio') {
//if you find any in the group not a radio button return null
return null;
}
}
}
小开

本页中的脚本帮助我想出了下面的脚本，我认为它更完整和通用。基本上，它将验证表单中的任意数量的单选按钮，这意味着它将确保为表单中的每个不同的单选组选择了一个单选选项。在下面的测试表格中:

   <form id="FormID">


Yes <input type="radio" name="test1" value="Yes">
No <input type="radio" name="test1" value="No">


<br><br>


Yes <input type="radio" name="test2" value="Yes">
No <input type="radio" name="test2" value="No">


<input type="submit" onclick="return RadioValidator();">

RadioValidator脚本将确保在提交之前已经为'test1'和'test2'给出了答案。您可以在表单中拥有任意多的无线电组，并且它将忽略任何其他表单元素。所有丢失的无线电答案将显示在一个单一的警告弹出。在这里，我希望它能帮助到人们。欢迎任何bug修复或有用的修改:)

<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
var ShowAlert = '';
var AllFormElements = window.document.getElementById("FormID").elements;
for (i = 0; i < AllFormElements.length; i++)
{
if (AllFormElements[i].type == 'radio')
{
var ThisRadio = AllFormElements[i].name;
var ThisChecked = 'No';
var AllRadioOptions = document.getElementsByName(ThisRadio);
for (x = 0; x < AllRadioOptions.length; x++)
{
if (AllRadioOptions[x].checked && ThisChecked == 'No')
{
ThisChecked = 'Yes';
break;
}
}
var AlreadySearched = ShowAlert.indexOf(ThisRadio);
if (ThisChecked == 'No' && AlreadySearched == -1)
{
ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
}
}
}
if (ShowAlert != '')
{
alert(ShowAlert);
return false;
}
else
{
return true;
}
}
</SCRIPT>
小开

使用JQuery，另一种检查单选按钮当前状态的方法是获取属性“checked”。

例如:

<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />

在这种情况下，你可以检查按钮使用:

if ($("#gender_male").attr("checked") == true) {
...
}
小开

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

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

表单

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

这个脚本

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

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

小开

给单选按钮，相同的名称，但不同的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;
}
}
小开

我只是想确保某物被选中(使用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;
}
小开

如果你想要使用普通的JavaScript，不想在每个单选按钮上添加id而使你的标记变得混乱，而只关心现代浏览器，下面的函数方法对我来说比for循环更有品位:

<form id="myForm">
<label>Who will be left?
<label><input type="radio" name="output" value="knight" />Kurgan</label>
<label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>


<script>
function getSelectedRadioValue (formElement, radioName) {
return ([].slice.call(formElement[radioName]).filter(function (radio) {
return radio.checked;
}).pop() || {}).value;
}


var formEl = document.getElementById('myForm');
alert(
getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

如果两者都没有选中，它将返回undefined(尽管你可以更改上面的行以返回其他内容，例如，要返回false，你可以将上面的相关行更改为:}).pop() || {value:false}).value;)。

还有一种前瞻性的polyfill方法，因为RadioNodeList接口应该可以很容易地在表单子无线电元素列表上使用value属性(在上面的代码中为formElement[radioName])，但这也有自己的问题:如何填充RadioNodeList?

小开

注意jQuery在获取无线电输入值时的行为:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group


// This returns the value of the checked radio button
// which triggered the event.
console.log( $(this).val() );


// but this will return the first radio button's value,
// regardless of checked state of the radio group.
console.log( $('input[name="myRadio"]').val() );


});

所以$('input[name="myRadio"]').val()不返回单选输入的检查值，正如你可能期望的那样——它返回第一个单选按钮的值。

小开

这对于具有相同名称的单选按钮是有效的，不需要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 });
小开

使用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来获取所选的值。

. 
$("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>

小开

只是试图用一些CSS选择器糖和香草JavaScript来改进拉斯·卡姆的解决方案。

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

这里不需要jQuery, querySelectorAll现在已经得到了足够广泛的支持。

编辑:修复了css选择器的一个错误，我已经包括了引号，尽管你可以省略它们，在某些情况下你不能这样做，所以最好保留它们。

小开

这也是可行的，避免调用元素id，而是将其作为数组元素调用。

下面的代码是基于这样一个事实:一个名为radiobuttons组的数组是由radiobuttons元素组成的，它们的顺序与html文档中声明的相同:

if(!document.yourformname.yourradioname[0].checked
&& !document.yourformname.yourradioname[1].checked){
alert('is this working for all?');
return false;
}
小开 
if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)
小开

HTML:

<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>


<p id="result"></p>

JAVAScript:

var options = document.getElementsByName("calculation");


for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
// do whatever you want with the checked radio
var calc = options[i].value;
}
}
if(typeof calc == "undefined"){
document.getElementById("result").innerHTML = " select the operation you want to perform";
return false;
}
小开

你可以使用这个简单的脚本。 多个单选按钮可能具有相同的名称和不同的值 

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.
}
小开

有一种非常复杂的方法，可以用ECMA6和.some()方法验证是否选中了任何单选按钮。

Html:

<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />

和javascript:

let htmlNodes = document.getElementsByName('status');


let radioButtonsArray = Array.from(htmlNodes);


let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

如果选中其中一些单选按钮，isAnyRadioButtonChecked将为true，如果两者都未选中，则false。

小开

返回单选按钮中所有选中的元素

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);
小开

我使用传播算子和一些检查数组中至少有一个元素通过了测试。

我为谁分担关心。

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);
<input type="radio" name="gender" checked value="Male" /> Male
<input type="radio" name="gender"  value="Female" / > Female

小开

试一试

[...myForm.sex].filter(r=>r.checked)[0].value


function check() {
let v= ([...myForm.sex].filter(r=>r.checked)[0] || {}).value ;
console.log(v);
}
<form id="myForm">
<input name="sex" type="radio" value="men"> Men
<input name="sex" type="radio" value="woman"> Woman
</form>
<br><button onClick="check()">Check</button>

小开

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

如果循环没有检测到被选择的输入元素，布尔变量selected将保持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>


提交答案