Javascript 檢查單選按鈕是否被選中？

Question

我找到了執行此操作的腳本，但它們僅適用於一個單選按鈕名稱，我有 5 個不同的單選按鈕集。 我如何檢查它是否現在被選中我嘗試提交表單

if(document.getElementById('radiogroup1').value=="") {
        alert("Please select option one");
        document.getElementById('radiogroup1').focus();
        return false;
    }

不起作用。

Answer 1

如果您決心使用標准 JavaScript，那么：

Function定義

var isSelected = function() {
    var radioObj = document.formName.radioGroupName;

    for(var i=0; i<radioObj.length; i++) {
        if( radioObj[i].checked ) {
            return true;
        }
    }

    return false;
};

用法

if( !isSelected() ) {
    alert('Please select an option from group 1 .');
}   

我建議使用jQuery 。 它有很多選擇器選項，當它們一起使用時，可以將大部分代碼簡化為一行。

替代解決方案

if( $('input[type=radio][name=radioGroupName]:selected').length == 0 ) {
    alert('Please select an option from group 1 .');
}

Answer 2

var checked = false, radios = document.getElementsById('radiogroup1');
for (var i = 0, radio; radio = radios[i]; i++) {
    if (radio.checked) {
        checked = true;
        break;
    }
}

if (!checked) {
    alert("Please select option one");
    radios.focus();
    return false;
}

return true;

Answer 3

為什么不只使用oneliner？

我寫了這段代碼，如果至少檢查了一個收音機，它將提交表單：

(function(el){for(var i=el.length;i--;) if (el[i].checked) return el[i].form.submit()||1})(document.form_name.radio_name)||alert('please select item')

否則它會發出警報。 或者您也可以修改它以與表單的onsubmit一起使用：

return (function(el){for(var i=el.length;i--;) if (el[i].checked) return 1})(document.form_name.radio_name)||alert('please select item')

只需相應地替換form_name和radio_name 。

看看它是如何工作的： http://jsfiddle.net/QXeDv/5/

Answer 4

這是一個很好的教程-> http://www.somacon.com/p143.php

---

// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
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 "";
}

// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
    if(!radioObj) return;
    var radioLength = radioObj.length;
    if(radioLength == undefined) {
        radioObj.checked = (radioObj.value == newValue.toString());
        return;
    }
    for(var i = 0; i < radioLength; i++) {
        radioObj[i].checked = false;
        if(radioObj[i].value == newValue.toString()) radioObj[i].checked = true;
    }
}

Answer 5

一個非常簡單的 function 是：

<script type="text/javascript">

function checkRadios(form) {
   var btns = form.r0;
   for (var i=0; el=btns[i]; i++) {
     if (el.checked) return true;
   }
   alert('Please select a radio button');
   return false;
}
</script>

<form id="f0" onsubmit="return checkRadios(this);">
  one<input type="radio" name="r0"><br>
  two<input type="radio" name="r0"><br>
  three<input type="radio" name="r0"><br>
  <input type="submit">
</form>

但是，您應該總是默認選擇一個單選按鈕（即使用 select 屬性），一些用戶代理可能會自動選擇 select 第一個按鈕。 然后您只需要檢查是否選中了默認值（通常是第一個）。

Answer 6

你對 jquery 還好嗎？ 如果是這樣：

$(document).ready(function(){
    if($('input[type=radio]:checked').length == 0)
    {
        alert("Please select option one");         
        document.getElementById('radiogroup1').focus();         
        return false;     
    }
}