Javascript 单选按钮上的onchange事件

我正在努力实现一些简单的目标。基本上，我有3个无线电组，只要更改其中一个组，我想得到所有无线电组的值，并显示在警报框中

我的代码如下

html

我这里也有一个JSFIDLE

在小提琴上，事件似乎根本不会触发，而在使用mozilla浏览的本地主机服务器上，我总是在警报框中获取每个组的第一个项目的值（是的）。我可能犯了一些愚蠢的错误。请帮我纠正这个

先谢谢你

编辑 校正小提琴

---

您可以使用下面的代码。您必须使用

：选中的
psudo选择器


$（文档）.on（“更改”，“输入[type=radio]”，函数（）{
var ac=$（'[name=“ac”]：选中'）.val（）；
var tier=$（'[name=“tier”]：checked'）。长度>0？$（'[name=“tier”]：checked'）。val（）：“”；
var cap=$（'[name=“cap”]：checked'）。长度>0？$（'[name=“cap”]：checked'）。val（）：“”；
警报（ac+“”+层+“”+上限）；
});

对
不


正常的
豪华的


大的
small
您没有在jsfiddle中选择框架，因此请在jsfiddle中选择jquery，然后运行代码。
添加了
：在您的
JS
代码中选中了

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

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

参考工作演示，这将对您有所帮助



对
不


正常的
豪华的


大的
小的
$（文档）.ready（函数（）{
$（“div.main input[type=radio]”）。on（'change'，function（）{
var thelength=$（“div.main输入[type=radio]”）长度；
//警报（长度）；
对于（var i=0；i检查：

<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

在较短的解决方案中，使用
input:checked
和jQuery
选择所有选中的按钮。each（）


$（文档）.ready（函数（）{
$（“input[type=radio]”）。在（“change”，function（）上{
var结果=”；
$（“输入：选中”）。每个（函数（键，值）{
结果+=$（val）.val（）+“
”；
});
$（“.results”）.html（结果）；
});
})；

对
不


正常的
豪华的


大的
小的
关于您的JSFIDLE，您没有将jquery添加到FIDLE中，您在jquery代码中使用了html代码中不存在的
容量
名称。我现在更改了它…感谢您的提醒。我仍然在警报框中得到了不正确的值谢谢@Haresh Vidja。我不敢相信我忘记了。等待4分钟倒计时…-）
$(document).ready(function(){
    $("input[type=radio]").on("change",function(){
        var ac=$("input[type=radio][name=ac]:checked").val();
        var tier=$("input[type=radio][name=tier]:checked").val();
        var cap=$("input[type=radio][name=capacity]:checked").val();

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

<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

jQuery( function( $ ) {

    function recalc()
  {
    var ac      =   $("input[name=ac]").val();
    var tier    =   $("input[name=tier]").val();
    var cap     =   $("input[name=capacity]").val();
    alert(ac+""+tier+""+cap);
  }

  $(document).ready(function(){
      $("input[type=radio]").on("change",function(){
        recalc();
      });
  });

});