如何检查是不是使用 JavaScript 选择了单选按钮？
Posted
技术标签:
【中文标题】如何检查是不是使用 JavaScript 选择了单选按钮？【英文标题】：How can I check whether a radio button is selected with JavaScript?如何检查是否使用 JavaScript 选择了单选按钮？ 【发布时间】：2022-01-15 09:12:16 【问题描述】：我在 html 表单中有两个单选按钮。当其中一个字段为空时，会出现一个对话框。如何检查单选按钮是否被选中？
【问题讨论】：
此链接可能对您有所帮助***.com/questions/6654601/… 【参考方案1】：假设你有这样的 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
根据您的标记的确切性质，上述内容可能会更有效，但这应该足以让您开始。
如果您只是想查看页面上的any单选按钮是否在anywhere被选中，PrototypeJS 会非常简单。
如果在页面某处至少选择了一个单选按钮，此函数将返回 true。同样，这可能需要根据您的特定 HTML 进行调整。
function atLeastOneRadio()
return ($('input[type=radio]:checked').size() > 0);
对于服务器端验证（请记住，您不能完全依赖 Javascript 进行验证！），这取决于您选择的语言，但您只需检查 gender请求字符串的值。
【讨论】：
但是无论选择什么，我都想检查是否选择了单选按钮。 我真的不明白你在说什么？是否对是否选择了任何单选按钮感兴趣？ 是的。因为如果没有填写所有字段（包括单选按钮），则无法提交表单。 if (document.getElementById('gender_Male').checked || document.getElementById('gender_Female').checked) alert('我的一些单选框被选中'); 我已经修改了我的原型示例，以利用我刚刚从 R. Bemrose 学到的 CSS 选择器课程。【参考方案2】：jQuery 会是这样的
if ($('input[name=gender]:checked').length > 0)
// do something here
让我把它分解成几块，以便更清楚地涵盖它。 jQuery 从左到右处理事情。
input[name=gender]:checked
input 将其限制为输入标签。
[name=gender] 将其限制为上一组中名称为性别的标签。
:checked 将其限制为在前一组中选择的复选框/单选按钮。
如果您想完全避免这种情况，请在 HTML 代码中将其中一个单选按钮标记为选中 (checked="checked")，这样可以保证始终选中一个单选按钮。
【讨论】：
-1 用于在未请求时提出库。这样我们就可以用“include library x, use x.doWhatYouNeed()”来回答所有问题。无意冒火，我真的认为应该用纯 javascript 来回答这个问题（然后最终指出使用库是多么容易） @RiccardoGalli：很多人已经在使用 jQuery，因此如果他们已经在使用它，为什么答案会以“使用 jQuery，它会是类似的东西”开头。 有人知道是否可以像这样链接选择器吗？ input[name=gender][type=radio] 或 input[name=gender,type=radio] 只是为了额外的验证？ @EW-CodeMonkey 你提到的第一种方式should work。【参考方案3】：普通的 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;
【讨论】：
嗯，我现在遇到了几乎同样的问题，你的代码很有帮助 这将为您获取最后选中的单选按钮的值。如果您有多个无线电组，那么这可能无法为您提供正确的值。 @styfle 这适用于 OP 的问题，他指出页面上的表单中只有两个单选按钮。对于不同的问题场景，例如两个以上的单选按钮、多个单选组等，解决方案会有所不同:) @RussCam 是的，这适用于只有 2 个单选按钮的小页面，但我添加了评论以使答案完整。获取单选按钮元素的最佳方式是name。
更好的方法是按特定类选择单选元素，然后将不同组的单选元素分组到不同的类中。否则，这个解决方案只适用于一组没有其他输入表单元素的单选元素。【参考方案4】：
只是尝试在 Russ Cam's solution 上添加一些 CSS 选择器糖与 vanilla JavaScript 一起改进。
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;
这里不需要 jQuery，querySelectorAll 现在已经得到了足够广泛的支持。
编辑：修复了css选择器的一个错误，我已经包含了引号，虽然你可以省略它们，在某些情况下你不能，所以最好把它们留在里面。
【讨论】：
可能应该是 var radios = document.querySelectorAll('input[type="radio"]:checked'); @ShafiqurRahman 你是绝对正确的，我会更新我的答案，我认为你不需要收音机周围的报价。 +1 用于原生 JavaScript。我总是在属性值周围使用引号，因为对于其他一些属性值（例如a[href^="http://"]），它们是必需的，并且一致性更易于维护。此外，这让属性声明匹配相应的 HTML。【参考方案5】：
您可以使用这个简单的脚本。 您可能有多个单选按钮，它们的名称和值不同。
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.
【讨论】：
+1。这是获取选中的 radio 元素的最短 Vanilla JS 解决方案，在某些情况下我们需要它。因此，我认为您有最好的答案。为了获得价值，我们可以使用document.forms[0].elements['nameOfRadioList'].value
我赞同@Bharata 所说的，这是迄今为止最好的答案。简洁、正确、最新。【参考方案6】：
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");
【讨论】：
警告：此代码在页面加载后立即返回弹出警告。【参考方案7】：这个页面中的脚本帮助我想出了下面的脚本，我认为它更完整和通用。基本上，它将验证表单中任意数量的单选按钮，这意味着它将确保已为表单中的每个不同单选组选择了单选选项。例如在下面的测试表格中：
<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”提供了答案。您可以在表单中拥有尽可能多的单选组，它会忽略任何其他表单元素。所有缺少的无线电答案都将显示在一个警报弹出窗口中。就这样吧，希望对大家有所帮助。欢迎任何错误修复或有用的修改:)
<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>
【讨论】：
【参考方案8】：使用 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)
【讨论】：
// 如果 ($$('input[name=radiosname]:checked').length > 0) 正是我需要的，则检查是否选择了无线电组中的某些内容【参考方案9】：在获取无线电输入值时注意 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() 不会像您预期的那样返回单选输入的检查值——它返回第一个单选按钮的值。
【讨论】：
【参考方案10】：我使用spread operator 和some 来检查数组中的至少一个元素通过了测试。
我为谁担心。
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【讨论】：
我喜欢你的回答@Hien Nguyen，这是我试图想出的东西（使用“any()”的想法，但我发现 JavaScript 只使用“some() ”。请有人告诉我“三点”是什么意思吗？没有它就行不通。【参考方案11】：有一种非常复杂的方法可以验证是否使用 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。
【讨论】：
【参考方案12】：这是我为解决这个问题而创建的实用函数
//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;
【讨论】：
喜欢这个是因为它的（再）可用性和简单性。此外，返回值可以通过一个不错的 switch 语句来处理。【参考方案13】：这对于共享相同名称的单选按钮有效，不需要 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 );
【讨论】：
【参考方案14】：if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)
【讨论】：
【参考方案15】：返回单选按钮中所有选中的元素
Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);
【讨论】：
【参考方案16】：使用 JQuery，检查单选按钮当前状态的另一种方法是获取属性“已选中”。
例如：
<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />
在这种情况下，您可以使用以下方法检查按钮：
if ($("#gender_male").attr("checked") == true)
...
【讨论】：
在我的例子中，$("#gender_male").attr("checked") 的值是字符串 "checked" 而不是布尔值。【参考方案17】：
只是对 Mark Biek 稍作修改；
HTML 代码
<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>
【讨论】：
getElementsByName() 返回一个 HTMLCollection，它没有选中的属性，所以我不相信您发布的 JavaScript sn-p 会按预期工作。正如其他人所建议的那样，您必须遍历 HTMLCollection 中的元素并查看是否检查了其中的任何一个。 谢谢。你是对的。:) 更新了我的回复，以免更多人得到错误信息。【参考方案18】：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 "";
【讨论】：
【参考方案19】：此代码将在提交表单时提醒选中的单选按钮。它使用 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>【讨论】：
【参考方案20】：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;
【讨论】：
【参考方案21】：这是扩展为不继续提交并在未选中单选按钮时发送警报的解决方案。当然，这意味着您必须一开始就取消选中它们！
if(document.getElementById('radio1').checked)
else if(document.getElementById('radio2').checked)
else
alert ("You must select a button");
return false;
请记住在表单中为每个单选按钮设置 id（'radio1'、'radio2' 或其他任何名称），否则脚本将不起作用。
【讨论】：
你可以这样做：if (!document.getElementById('radio1').checked && !document.getElementById('radio2').checked) alert(); .【参考方案22】：
一个例子：
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;
【讨论】：
【参考方案23】：表格
<form name="teenageMutant">
<input type="radio" name="ninjaTurtles"/>
</form>
脚本
if(!document.teenageMutant.ninjaTurtles.checked)
alert('get down');
小提琴：http://jsfiddle.net/PNpUS/
【讨论】：
【参考方案24】：我只想确保 something 被选中（使用 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;
【讨论】：
【参考方案25】：如果你想要 vanilla 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]），但这有其自身的问题：How to polyfill RadioNodeList?
【讨论】：
【参考方案26】：这也有效，避免调用元素 id，而是将其作为数组元素调用。
以下代码基于这样一个事实，即名为 radiobuttons 组的数组由 radiobuttons 元素组成，其顺序与它们在 html 文档中声明的顺序相同：
if(!document.yourformname.yourradioname[0].checked
&& !document.yourformname.yourradioname[1].checked)
alert('is this working for all?');
return false;
【讨论】：
【参考方案27】：试试
[...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>【讨论】：
【参考方案28】：所以基本上这段代码所做的就是遍历一个包含所有输入元素的 nodeList。如果这些输入元素之一是radio 类型并且被检查然后打破循环并做一些事情。
如果循环没有检测到输入元素被选中，也做一些事情。
let inputs = document.querySelectorAll('input'),
btn = document.getElementById('btn'),
selected = false;
function check()
for(const input of inputs)
if(input.type === 'radio' && input.checked)
console.log('You selected: ' + input.value) // Checked -> do something
selected = true;
break;
!selected ? console.log("You didn't select any option") : null; // Non checked
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>【讨论】：
【参考方案29】：提供单选按钮，名称相同但 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;
【讨论】：
以上是关于如何检查是不是使用 JavaScript 选择了单选按钮？的主要内容，如果未能解决你的问题，请参考以下文章
如果使用 PHP 选择了单选按钮（当前），如何在 Mysql 数据库中为出勤值添加 +1？