l'événement onchange sur le bouton radio

Je suis en train de réaliser quelque chose de simple. Fondamentalement, j'ai 3 groupes de radio et onchange de l'un de ces groupe, je veux récupérer les valeurs de tous les groupes de radio et l'affichage 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 n'a pas de feu à tous, alors que sur mon serveur localhost l'aide de mozilla pour parcourir j'ai toujours obtenir les valeurs des premiers éléments de chaque groupe dans ma boîte d'alerte (oui normal grosse). Je pourrais faire un peu stupide erreur. Merci de m'aider à résoudre ce problème.

Merci d'avance...

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

  • À propos de votre jsfiddle, vous n'avez pas ajouté de jquery pour violon et que vous avez utilisé capacity nom de code jquery qui n'existe pas dans le code html.
  • je l'ai changé maintenant...merci pour ponting il. Je reçois toujours des valeurs incorrectes dans la zone d'alerte
InformationsquelleAutor user3889963 | 2016-09-19
  1. 4

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

    JS:

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

    HTML:

    <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

    • merci @Haresh Vidja. Je ne peux pas croire que j'ai oublié que.
    • d'attente pour les 4 minutes de compte à rebours..:-)
    InformationsquelleAutor Haresh Vidja
  2. 1

    consulter le travail de démonstration, cela vous aidera à vous.

    HTML:

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

    InformationsquelleAutor Chanaka Caldera
  3. 0

    Vous n'avez pas sélectionné dans le cadre jsfiddle, donc veuillez sélectionner jquery dans jsfiddle puis exécutez le code.
    l'événement onchange sur le bouton radio

    InformationsquelleAutor sheetal
  4. 0

    Ajouté :checked dans votre JS code 

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

    Violon

    InformationsquelleAutor Shrinivas Pai
  5. 0

    Vérifier:

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

});
    InformationsquelleAutor landsman
  6. 0

    Plus court de solution, sélectionnez tous vérifié boutons à l'aide de input:checked et jQuery .each()

    JS:

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

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

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

    HTML:

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

    InformationsquelleAutor Nhan