如何检查是否使用JavaScript选择了单选按钮?
我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何检查是否选中了单选按钮?让我们假设您有这样的HTML如何检查是否使用JavaScript选择了单选按钮?,javascript,radio-button,Javascript,Radio Button,我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何检查是否选中了单选按钮?让我们假设您有这样的HTML <input type="radio" name="gender" id="gender_Male" value="Male" /> <input type="radio" name="gender" id="gender_Female" value="Female" /> 根据标记的确切性质,可以使上述内容更有效,但这应该足以让您开始
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
根据标记的确切性质,可以使上述内容更有效,但这应该足以让您开始
如果您只是想查看页面上的任何地方是否选择了any单选按钮,这会使操作变得非常简单 如果在页面的某个位置至少选择了一个单选按钮,则此函数将返回true。同样,这可能需要根据您的特定HTML进行调整
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
对于服务器端验证(请记住,您不能完全依赖Javascript进行验证!),这取决于您选择的语言,但您只需检查请求字符串的
gender
值
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
让我把它分解成几部分,以便更清楚地描述它。
jQuery从左到右处理事务
input[name=gender]: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;
}
}
var radios=document.getElementsByTagName('input');
var值;
对于(变量i=0;i
只是对马克·比克稍加修改
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>
函数check1(){
var无线电检查_val=“”;
对于(i=0;i
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;
对于(变量i=0;i
函数getCheckedValue(radioObj){
如果(!radioObj)
返回“”;
var radioLength=radioObj.长度;
如果(放射长度==未定义)
如果(无线电目标检查)
返回radioObj.value;
其他的
返回“”;
对于(var i=0;i //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;
}
}
}
//定义单选按钮,每个按钮都有一个通用的“名称”和不同的“id”。
//例如
//
//参数sGroupName:组的“名称”。例如,“存储组”
//返回选中单选按钮的“id”。例如“本地存储”
//返回:可以是“未定义的”-请务必检查是否存在此问题
函数checkedRadiobN(sGroupName)
{
var group=document.getElementsByName(sGroupName);
对于(变量i=0;i
本页中的脚本帮助我想出了下面的脚本,我认为它更完整、更通用。基本上,它将验证表单中任意数量的单选按钮,这意味着它将确保为表单中的每个不同单选组选择了一个单选选项。e、 g在以下测试表格中:
<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”的答案。表单中可以有任意多个广播组,它将忽略任何其他表单元素。所有缺失的无线电应答将显示在单个警报弹出窗口中。就这样,我希望它能帮助人们。任何错误修复或有用的修改(欢迎:)
函数RadioValidator()
{
var showart='';
var AllFormElements=window.document.getElementById(“FormID”).elements;
对于(i=0;ifunction 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();">
<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>
<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;
}
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');
}
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;
}
}
// 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;
}
<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>
$('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() );
});
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 });
<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />
// 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)
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;
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)
<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>
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.
}
<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />
let htmlNodes = document.getElementsByName('status');
let radioButtonsArray = Array.from(htmlNodes);
let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);
Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);
[...myForm.sex].filter(r=>r.checked)[0].value