javascript - 单选按钮上的 onchange 事件

Question

我正在尝试实现一些简单的事情。基本上我有 3 个单选按钮组，并且在更改其中任一组时，我想获取所有单选按钮组的值并显示在警报框中。

我的代码如下

html

<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small

js

$("input[type=radio]").on("change",function(){
    var ac=$("input[type=radio][name=ac]").val();
    var tier=$("input[type=radio][name=tier]").val();
    var cap=$("input[type=radio][name=cap]").val();

    alert(ac+" "+tier+" "+cap);
});

我这里也有一个jsfiddle https://jsfiddle.net/5fg6by8m/

在 fiddle 上，似乎事件根本没有触发，而在我的本地服务器上使用 mozilla 浏览时，我总是在警报框中获得每组第一个项目的值(是的，正常大)。我可能犯了一些愚蠢的错误。请帮我纠正这个问题。

提前致谢...

编辑 纠正 fiddle https://jsfiddle.net/5fg6by8m/4/

Answer 1

您可以使用下面的代码。你必须使用 :checked psudo 选择器

$(document).on("change","input[type=radio]",function(){
    var ac=$('[name="ac"]:checked').val();
    var tier= $('[name="tier"]:checked').length>0? $('[name="tier"]:checked').val():"";
    var cap=$('[name="cap"]:checked').length>0 ?$('[name="cap"]:checked').val():"";

    alert(ac+" "+tier+" "+cap);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small