javascript - 如何使用姓氏中具有不同 id 的多个单选按钮(如 #radio_1、#radio_2、#radio_3)制作 Jquery Click 功能

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>

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