it-swarm.com.ru

событие onchange на переключателе

Я пытаюсь достичь чего-то простого. В основном у меня есть 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/

На скрипке кажется, что событие вообще не запускается, а на моем локальном сервере, использующем mozilla для просмотра, я всегда получаю значения первых элементов каждой группы в окне оповещения (да, обычно большое). Я мог бы сделать какую-то глупую ошибку. Пожалуйста, помогите мне исправить это.

Заранее спасибо...

редактировать исправил скрипку https://jsfiddle.net/5fg6by8m/4/

3
user3889963

Вы можете использовать приведенный ниже код. Вы должны использовать псевдо-селектор :checked

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

обратитесь к рабочей демонстрации, это поможет вам.

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

Более короткое решение: выберите все отмеченные кнопки, используя 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>

0
Nhan

Вы не выбрали фреймворк в jsfiddle, поэтому, пожалуйста, выберите jquery в jsfiddle, затем запустите код .  enter image description here

0
sheetal

Добавлен :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

0
Shrinivas Pai

Проверь это:

<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