web-dev-qa-db-fra.com

événement onchange sur le bouton radio

J'essaie de réaliser quelque chose de simple. Fondamentalement, j'ai 3 groupes de radio et sur l'échange de l'un ou l'autre de ces groupes, je veux obtenir les valeurs de tous les groupes de radio et les afficher sur une boîte d'alerte.

Mon code est comme suit

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

J'ai un jsfiddle ici aussi https://jsfiddle.net/5fg6by8m/

Sur le violon, il semble que l’événement ne se déclenche pas du tout, alors que sur mon serveur localhost utilisant mozilla pour parcourir, j’obtiens toujours les valeurs des premiers éléments de chaque groupe dans ma boîte d’alerte (oui gros). Je pourrais faire une erreur stupide. S'il vous plaît, aidez-moi à corriger ceci.

Merci d'avance...

modifier violon corrigé https://jsfiddle.net/5fg6by8m/4/

javascriptjqueryhtmlonchange
3
user3889963

Vous pouvez utiliser le code ci-dessous. vous devez utiliser :checked pseudo-sélecteur

$(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

4
Haresh Vidja

reportez-vous à la démo de travail, cela vous aidera.

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

1
Anuradh S

Solution plus courte, sélectionnez tous les boutons cochés en utilisant input:checked et 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>

0
Nhan

Vous n'avez pas sélectionné framework dans jsfiddle, veuillez donc sélectionner jquery dans jsfiddle puis lancez le code . enter image description here

0
sheetal

Ajout de :checked dans votre code 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

0
Shrinivas Pai

Vérifie ça:

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

});
0
landsman