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/

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

提前致谢...

编辑纠正小提琴 https://jsfiddle.net/5fg6by8m/4/

Answer 1

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

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

你没有在jsfiddle中选择框架，所以请在jsfiddle中选择jquery然后运行代码。

Answer 4

在:checked代码

中添加了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);
    });
});

Fiddle

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

更短的解决方案，使用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事件

6 个答案: