#의 radio_1, #의 radio_2, #의 radio_3

Question

여기 내 HTML 코드

<label><input name="radio" id="radio" type="radio" value="1"></input> <span>Radio 1</span></label> 
<label><input name="radio" id="radio" type="radio" value="2"></input> <span>Radio 2</span></label> 
<label><input name="radio" id="radio" type="radio" value="3"></input> <span>Radio 3</span></label> 

같은 성에서 다른 ID로 다수의 무선 버튼을 jQuery를 클릭 기능을 그리고 이건 내 JQuery와 코드

<script type="text/javascript"> 
    jQuery.noConflict(); 
    (function($) { 
     $(document).ready(function(){ 

      $('#radio').click(function(){ 
       var ongkir = $(this).val(); 
       alert(ongkir); 
      }); 

     }); 
    })(jQuery); 
</script> 

입니다 방법

결과 값이 1인데 어떻게 2와 3 값을 얻을 수 있습니까?

Answer 1

id 속성은 id이 선택된 첫 번째 요소 만 고유해야합니다. 따라서 요소 그룹에 항상 class을 사용하십시오.

jQuery.noConflict(); 
 

 
(function($) { 
 
    $('.radio').click(function() { 
 
     var ongkir = $(this).val(); 
 
     alert(ongkir); 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input name="radio" class="radio" type="radio" value="1"></input> <span>Radio 1</span> 
 
</label> 
 
<label> 
 
    <input name="radio" class="radio" type="radio" value="2"></input> <span>Radio 2</span> 
 
</label> 
 
<label> 
 
    <input name="radio" class="radio" type="radio" value="3"></input> <span>Radio 3</span> 
 
</label>

Answer 2

id은 고유해야합니다! 그러나 다른 변경없이 name도 사용할 수 있습니다. 또는 당신은

$(function(){ 
 
    $('input[name=radio]').click(function(){ 
 
     var ongkir = $(this).val(); 
 
     alert(ongkir); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="radio" type="radio" value="1"></input> <span>Radio 1</span> 
 
<input name="radio" type="radio" value="2"></input> <span>Radio 2</span> 
 
<input name="radio" type="radio" value="3"></input> <span>Radio 3</span>