单选按钮上的 onchange 事件

Question

我正在努力实现一些简单的事情。基本上我有 3 个无线电组和其中任何一个的 onchange，我想获取所有无线电组的值并显示在警告框中。

我的代码如下

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

我这里也有一个jsfiddlehttps://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

Answer 2

您在 jsfiddle 中没有 selected 框架，所以请在 jsfiddle select jquery 然后运行代码。

Answer 3

在您的 JS 代码中添加了 :checked

$(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);
    });
});

Fiddle

Answer 4

参考工作演示，这对你有帮助。

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
</head>

<style type="text/css">




</style>


<body>

<div class="main">
 <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
</div>

<script type="text/javascript">

$(document).ready(function(){
 
 $("div.main input[type=radio]").on('change',function(){
  var thelength = $("div.main input[type=radio]").length;
  //alert(thelength);
  for(var i=0;i<thelength;i++)
  {
   var theValueofCheck = $("div.main input[type=radio]").eq(i).val();
   alert(theValueofCheck);
  }
  
  });
 
         });

</script>




</body>


</html>

Answer 5

检查这个：

<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:

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

});

Answer 6

更短的解决方案，select 所有选中的按钮都使用 input:checked 和 jQuery .each()

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

    $("input:checked").each(function(key, val) {
      results += $(val).val() + "<br>";
    });

    $(".results").html(results);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.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

<div class="results"></div>

单选按钮上的 onchange 事件

onchange event on radio button

html

javascript

jquery

onchange