从AJAX请求动态生成的无线电按钮中获取值

Question

我已经生成了带有名称的无线电按钮，具体取决于每个候选人的每个位置。现在，问题是获取每个广播按钮的值。我的代码像这样;

 $("#btn-vote").click(function() {
    $.ajax({
        url: 'admin/requests/Get-Positions.php',
        method: 'POST',
        data: { id : id },
        dataType: 'json',
        success: function(result) {
            var textToInsert = '';
            $.each(result, function(key, value)
            {
                var position_id = value['id'];
                $.ajax({
                    url: 'admin/requests/Get-Candidate_Per_Position.php',
                    method: 'POST',
                    data: { position_id : position_id },
                    dataType: 'json',
                    success: function(data) {
                        textToInsert += '<div class="card bg-primary text-center"><div class="card-body"><h4 class="text-white m-0" id="position">'+ value['position'] +'</h4></div></div><br><div class="row">';
                        $.each(data, function(key, value)
                        {
                            textToInsert += '<div class="col-lg-3 col-sm-6 text-center mb-4"><img class="rounded-circle img-responsive d-block mx-auto" src="admin/img/'+ value['photo'] +'" width="150" height="150"><br><span class="lead">'+ value['first_name'] +'</span><div class="form-check"><label class="form-check-label"><input type="radio" class="form-check-input" name="position'+ value['position_id'] +'" value="'+ value['id'] +'"></label></div></div>';
                        });
                        textToInsert += '</div>';
                        $('#candidate_list2').html(textToInsert);
                    }
                });
            });
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseWithJSON)
        }
    });
});

收音机按钮是在第二个Ajax请求中生成的，其名称 位置 每个位置的ID。

谢谢您的宝贵时间。任何帮助将不胜感激。

Answer 1

给您的无线电按钮相同的类。然后单击"上课"的挂钩，当您单击时，使用$(this)获取当前选择的广播按钮的值。

<input type="radio" class="form-check-input candidate" name="position'+ value['position_id'] +'" value="'+ value['id'] +'">

var textToInsert = '';
    var results = [{id: 23, position: 'Group1'}, {id: 13, position: 'Group2'}];
    var candidate = [{photo: 'https://www.thesun.co.uk/wp-content/uploads/2017/09/nintchdbpict0003560781641.jpg', first_name: 'Michaela', id: 45}, {photo: 'https://media2.s-nbcnews.com/j/newscms/2016_11/1463891/160318-jill-stein-green-party-yh-1145a_b279e0d0c484f5624e923917d4c42546.nbcnews-ux-2880-1000.jpg', first_name: 'Jill', id: 25}, {photo: 'https://d3i6fh83elv35t.cloudfront.net/newshour/app/uploads/2015/07/RTR4XVGV-1024x683.jpg', first_name: 'John', id: 65}];
    $('#btn-vote').on('click', function(){
        $.each(results, function (key, value) {
            var position_id = value['id'];
            var position = value['position'];
            textToInsert += '<div class="card bg-primary text-center"><div class="card-body"><h4 class="text-white m-0" id="position">'+ value['position'] +'</h4></div></div><br><div class="row">';
            $.each(candidate, function(key, value)
            {
                candidate[key].position_id = position_id;
                textToInsert += '<div class="col-lg-3 col-sm-6 text-center mb-4"><img class="rounded-circle img-responsive d-block mx-auto" src="'+ value['photo'] +'" width="150" height="150"><br><span class="lead">'+ value['first_name'] +'</span><div class="form-check"><label class="form-check-label"><input type="radio" data-position="' + position + '" class="form-check-input candidate" name="position'+ value['position_id'] +'" value="'+ (value['id'] + position_id) +'"></label></div></div>';
            });
            textToInsert += '</div>';
            $('#candidate_list2').html(textToInsert);
        });
    });

   // get value from checked radio buttons
    $('#btn-results').on('click', function(){
        var results = {};
        $("input:radio.candidate:checked").each(function() {
            results[$(this).data('position')] = $(this).val();
        });
        console.log(results);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-vote">Vote</button>
<button id="btn-results">Get results</button>
<div id="candidate_list2"></div>