检查是否选中了所有单选按钮答案

【问题标题】：Check if all radio buttons are checked检查是否选中了所有单选按钮
【发布时间】：2012-08-02 14:42:02
【问题描述】：

我想检查一些单选按钮以允许用户单击链接（否则它应该引起警报）。

这里是代码

<html>
<head>
</head>
<body>
<a href="http://www.aerosoft.de" id="a_next">aerosoft.de</a>

            <li class="radiobutton"><span class="name">Struct. Temp. Indic.> 38°C -not exceed 55°C</span>
            <input name="1" type="radio" value="other" /></li>
            <li class="radiobutton"><span class="name">Airplane Documents - check </span>
            <input name="2" type="radio" value="other" /></li>
            <li class="radiobutton"><span class="name">Flight Control Lock - removed</span>
            <input name="3" type="radio" value="other" /></li>
</body>
</html>

用户必须选中所有 3 个单选按钮才能使链接正常工作，否则如果他只选中 2 个单选按钮，他应该在点击链接时收到警报。

如果有人能帮忙就好了：/

问候费边

【问题讨论】：

你为什么使用单选按钮而不是复选框？单选按钮适用于一次只能选择一个的组（单击一个会取消选择之前选择的一个）。
需要完成：/带有复选框我也完成了......但我需要使用单选按钮

标签： javascript radio-button

【解决方案1】：

处理链接上的点击事件。循环通过收音机，如果没有选中，则显示警报并返回 false 以取消单击的默认操作（即取消导航）。

window.onload = function() {
    document.getElementById("a_next").onclick = function(e) {
        if (!e) e = window.event;
        var els = document.getElementsByTagName("input"),
            i;
        for (i=0; i < els.length; i++) {
            if (!els[i].checked) {
                alert("Your message here.");
                e.returnValue = false;
                return false;
            }
        }
    };
};

演示：http://jsfiddle.net/t9wqc/

【讨论】：

【解决方案2】：

如果你可以使用 jQuery，它会更干净..

查看全文example here

<a href="#">aerosoft.de</a>


var link = "http://www.aerosoft.de" ;

$('input').change(function(){
   var allChecked = $('input:checked').length == 3;

    if(allChecked ){
      $('#a_next').attr('href',link).removeClass('disabled');
    }
    else{
      $('#a_next').attr('href','#').addClass('disabled');
    }             
});

【讨论】：

不能让它工作：/我总是得到一个错误 var link = "aerosoft.de" id="a_next";
即使忽略这个问题没有用“jQuery”标记的事实，我还是建议捕获链接上的点击事件并在那时测试单选按钮。
@nnnnnn：我就是这么想的。但是通过这种方法，他还可以在视觉上启用/禁用链接以表明它现在是“可点击的”。

【解决方案3】：

如果你会使用 jQuery，

已编辑：（在 cmets 之后；之前的答案有错误）

$(document).ready(function() {
    $('#a_next').click(function(e){                 
        $('input[type="radio"]').each(function(){
            if(!$(this).prop('checked')) {
               alert('Check all radios first');
               e.preventDefault();  // to stop anchor jumping to url
               return false;      // to break .each
            }
        }); 
    });
});

Demo

【讨论】：

需要从点击处理程序返回 false，而不仅仅是来自 .each() 回调。
那是因为，return false 在.each() 中有不同的含义。让我更正