从ajax请求动态生成的单选按钮获取值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从ajax请求动态生成的单选按钮获取值相关的知识，希望对你有一定的参考价值。
我根据每个候选人的每个位置生成了带名字的单选按钮。现在问题是获得每个单选按钮的值。我的代码是这样的;
$("#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请求时生成，其名称如position +每个位置的ID。
感谢您的时间。任何帮助将不胜感激。
答案
将您的单选按钮设为同一类。并点击事件到该类，当您单击时，使用$(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>以上是关于从ajax请求动态生成的单选按钮获取值的主要内容，如果未能解决你的问题，请参考以下文章