如何检查单选button是否被JavaScript选中？

我有一个HTML表单中的两个单选button。 当其中一个字段为空时，会出现一个对话框。 我怎样才能检查一个单选button是否被选中？

Answer 1

假设你有这样的HTML

<input type="radio" name="gender" id="gender_Male" value="Male" /> <input type="radio" name="gender" id="gender_Female" value="Female" /> 

对于客户端validation，这里有一些Javascript来检查select哪一个：

 if(document.getElementById('gender_Male').checked) { //Male radio button is checked }else if(document.getElementById('gender_Female').checked) { //Female radio button is checked } 

以上可以提高效率取决于你的标记的确切性质，但这应该足以让你开始。

---

如果您只是想查看是否在页面的任何位置select了任何单选button， PrototypeJS使其非常容易。

这是一个函数，如果在页面的某个地方至lessselect了一个单选button，它将返回true。 同样，这可能需要根据您的特定HTML进行调整。

 function atLeastOneRadio() { return ($('input[type=radio]:checked').size() > 0); } 

---

对于服务器端的validation（记住，你不能完全依赖Javascript进行validation！） ，这取决于你select的语言，但是你会检查请求string的gender值。

Answer 2

用jQuery ，它会是这样的

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

让我把它分解成几个部分，以便更清楚地说明。 jQuery从左到右处理事情。

 input[name=gender]:checked 

1. input将其限制为input标签。
2. [name=gender]将其限制为前一组中名称为gender的标签。
3. :checked将其限制为在上一组中选中的checkbox/单选button。

如果您想完全避免这种情况，请在HTML代码中将其中一个单选button标记为已选中（ checked="checked" ），这将确保始终选中一个单选button。

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

Answer 4

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

Answer 5

只是试图改善Russ Cam的解决scheme，用一些CSS的select器糖与香草JavaScript抛出。

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

在这里没有真正需要jQuery，querySelectorAll现在被广泛支持。

编辑：修复了一个与CSSselect器的错误，我已经包括引号，虽然你可以省略它们，在某些情况下，你不能，所以最好把它们放进去。

Answer 6

这个页面中的脚本帮助我想出下面的脚本，我认为这个脚本更加完整和通用。 基本上，它将validation表格中的任意数量的单选button，这意味着它将确保已经为表格内的每个不同的无线电组select了无线电选项。 例如在下面的testing表格中：

  <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”提供了一个答案。 您可以在表单中拥有尽可能多的广播组，并且会忽略任何其他表单元素。 所有丢失的广播答案将显示在一个单一的警报popup。 在这里，我希望它可以帮助人们。 任何错误修复或有用的修改欢迎:)

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

Answer 7

注意这个行为机智jQuery获取无线电input值时：

 $('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()并不返回无线电input的检查值，如你所期望的那样 – 它返回第一个单选button的值。

Answer 8

这是我为解决这个问题而创build的一个实用函数

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

Answer 9

这对于共享同名的单选button是有效的，不需要JQuery。

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

如果我们在谈论checkbox，我们想要一个checkbox勾选的名单共享一个名字：

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

Answer 10

使用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) 

Answer 11

提交表单时，此代码将提醒所选的单选button。 它使用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> 

Answer 12

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

Answer 13

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

例如：

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

在这种情况下，您可以使用以下方法检查button

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

Answer 14

 if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1) 

Answer 15

对马克·比克只是一个小小的修改;

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代码来检查单选button是否被选中

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

Answer 16

这是解决scheme，扩大后不提交提交，并发送警报，如果单选button没有检查。 当然，这意味着你必须先让他们不要开始！

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

只要记住在每个单选button的表单中设置id（'radio1'，'radio2'或任何你所说的），否则脚本将无法工作。

Answer 17

一个例子：

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

Answer 18

表格

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

剧本

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

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

Answer 19

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

Answer 20

我只是想确保select（使用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; } 

Answer 21

如果你想要香草JavaScript，不想混淆你的标记，通过添加每个单选button的ID， 只关心现代浏览器 ，以下function的方法是比我有点雅致比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 （尽pipe你可以改变上面的行来返回其他的东西，例如， false返回，你可以改变上面的相关行}).pop() || {value:false}).value; }).pop() || {value:false}).value; ）。

还有前瞻性的polyfill方法，因为RadioNodeList接口应该使在表单子元素（在上面的代码中可以formElement[radioName] ）的列表中使用一个value属性很容易，但是它有自己的问题： 如何填充RadioNodeList？

Answer 22

这也是工作，避免调用元素id，但调用它作为一个数组元素。

下面的代码是基于以下事实：一个名为单选button组的数组由radiobuttons元素按照它们在html文档中声明的顺序组成：

 if(!document.yourformname.yourradioname[0].checked && !document.yourformname.yourradioname[1].checked){ alert('is this working for all?'); return false; } 

Answer 23

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

Answer 24

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

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