javascript - 如何使用姓氏不同的多个单选按钮(例如＃radio_1，＃radio_2，＃radio_3)使Jquery Click函数

这是我的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>

这是我的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？

最佳答案

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>