单选按钮返回与第一个动态生成的单选按钮相同的值

Question

我真的需要一些帮助...所以我从 php 动态生成单选按钮，根据数据库中的项目数，单选按钮带有一个值和一个文本，值是相应条目的 id在数据库中，问题是当我尝试获取该值时，它返回第一个单选按钮的值，对于所有单选按钮，以下是我使用的 jquery 和 php 代码，非常感谢您的帮助，谢谢

$(function(){

 var pName;
 var selectedValue;
 $(".sel1").on('change',function(){
   $selectedValue = $("input[name='id']:checked").val();
   alert($selectedValue);
});

$(".submit_btn").on('click',function(event){
    event.preventDefault();
        var $this=$(this);
        var $cat_id=$this.data('uid');


            $.ajax({
                url:"vote.php",
                method:"get",
                data:"cat_id="+$cat_id+"&hisId="+$selectedValue,
                success:function(result){

                       alert(result);

                }
            })

});

});

php

<div class="col-md-4 col-lg-4 col-sm-4 col-xsm-4 col-xxl-4 mt-4">
    <div class="cat_holder">
        <form action="" class="ml-4">
             <div class="form-group">
             <label for="#select1" class="cat_name"><?php echo $catNames; ?></label><br>

                <?php
                foreach($player_id as $real_player_id){
                    $player_name=$caller->getPlayerNames($real_player_id);
                    ?>

                    <input class="text_style sel1" id="select1" type="radio" name="id" value="<?php echo $real_player_id;?>"> <?php echo $player_name;?><br>

                    <?php
                    }
                ?>

              </select>
            </div>
            <div class="form-row">
                <div class="col-md-6 col-lg-6 col-sm-6 col-xsm-6 col-xxl-6">
                    <input type="submit" value="Vote" class="btn btn-primary btn-block submit_btn" data-uid="<?php echo $realcatIds;?>" readonly >
                </div>
            </div>
        </form>
    </div>
</div>

Answer 1

1.从 PHP 代码中的单选按钮中删除 id="select1"。 （因为 id 需要是唯一的）

2.转换

$selectedValue = $("input[name='id']:checked").val();

到

$selectedValue = $(this).val();

注意：-$("input[name='id']:checked") 将始终给出所有选中复选框中第一个选中的复选框值。