如果你想使用普通的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?

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

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

对于jQuery，它就像这样

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

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

input[name=gender]:checked

Input将其限制为输入标记。 [name=gender]将其限制为前一组中具有名称性别的标签。 :checked将其限制为前一组中选中的复选框/单选按钮。

如果您希望完全避免这种情况，可以在HTML代码中将其中一个单选按钮标记为已选中(checked="checked")，这将确保始终选中一个单选按钮。

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

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

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

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

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

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