【发布时间】：2017-07-13 08:06:48
【问题描述】：
我有一组从 $.post 返回结果创建的复选框。每次从下拉列表中选择不同的人时，都会创建这些复选框，并为每个人显示不同的人。
$.post("api.php/atherapists", {clientID: clientID}).done(function(data){
var data = JSON.parse(data);
var trHTML = '';
$.each(data, function(i, item){
therapistID = item.therapist_id;
therapistName = item.therapist_name;
trHTML += '<tr><td><input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '"></td><td>' + therapistName + '</td></tr>';
});
$('#tableAvailable').empty();
$('#tableAvailable').append(trHTML);
});
我的问题是关于在单击复选框时从复选框中获取值。我计划在单击其中一个复选框并将其值发送到 php 以进行处理时，让函数从 $.post 中触发 mysqli 查询。每次我尝试提醒选中复选框的值时，都没有任何反应。这些我都试过了
$("input[name='achkbox']").change(function(){
alert($(this).attr('value'));
});
$('#achkbox').click(function(){
alert($(this).attr('value'));
});
$('#achkbox').change(function(){
var id = $(this).val();
if(id != null){
alert(id);
}
});
似乎没有返回/显示我需要发送到 php 以处理此人的值。我可以弄清楚如何即时将数据发送到 php，但我无法弄清楚我在获取值时做错了什么。
编辑 - 2017 年 2 月 23 日 我已经实现了 Fermin 的建议，这些建议很漂亮，但这是我的困境
$.post("api.php/atherapists", {clientID: clientID}).done(function(data){
var data = JSON.parse(data);
var table = $('#tableAvailable');
var trHTML = '';
$('#tableAvailable').empty();
$.each(data, function(i, item){
therapistID = item.therapist_id;
therapistName = item.therapist_name;
var tr = $('<tr></tr>');
var td1 = $('<td></td>');
var td2 = $('<td></td>');
var checkbox = $('<input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '" >').click(function(){
var theraID = $(this).val();
//fire ajax call to assign selected therapist to client
$.post("api.php/assignsave", {clientID: clientID, therapist: theraID}).done(function(data){
//after assignment refresh the table by running $.post("api.php/atherapists) again
//maybe making this whole thing a function then recalling it after post
});
});
tr.append(td1.append(checkbox)).append(td2.append(therapistName));
table.append(tr);
});
});
2017 年 2 月 23 日上午 9:55 编辑
使用 Fermin 解决方案和一些函数的混合物使其工作。这就是我所做的
function getATherapists(clientID){
$.post("api.php/atherapists", {clientID: clientID}).done(function(data){
var data = JSON.parse(data);
var table = $('#tableAvailable');
var trHTML = '';
$('#tableAvailable').empty();
$.each(data, function(i, item){
therapistID = item.therapist_id;
therapistName = item.therapist_name;
var tr = $('<tr></tr>');
var td1 = $('<td></td>');
var td2 = $('<td></td>');
var checkbox = $('<input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '" >').click(function(){
var theraID = $(this).val();
//assign therapist to client
$.post("api.php/assignsave", {clientID: clientID, therapist: theraID}).done(function(data){
//call getATherapists function
getATherapists(clientID);
//create a new function to get current therapists since getCTherapists is further down the list
function getCurrentTherapists(clientID){
$.post("api.php/ctherapists", {clientID: clientID}).done(function(data){
var data = JSON.parse(data);
var table = $('#tableCurrent');
var trHTML = '';
$('#tableCurrent').empty();
$.each(data, function(i, item){
therapistID = item.therapist_id;
therapistName = item.therapist_name;
var tr = $('<tr></tr>');
var td1 = $('<td></td>');
var td2 = $('<td></td>');
var checkbox = $('<input type="checkbox" name="cchkbox" id="cchkbox" value="' + therapistID + '" >').click(function(){
var theraID = $(this).val();
//assign therapist to client
$.post("api.php/removesave", {clientID: clientID, therapist: theraID}).done(function(data){
//rerun getCurrentTherapists & getATherapists
getCurrentTherapists(clientID);
getATherapists(clientID);
});
});
tr.append(td1.append(checkbox)).append(td2.append(therapistName));
table.append(tr);
});
});
};
getCurrentTherapists(clientID);
});
});
tr.append(td1.append(checkbox)).append(td2.append(therapistName));
table.append(tr);
});
});
};
function getCTherapists(clientID){
$.post("api.php/ctherapists", {clientID: clientID}).done(function(data){
var data = JSON.parse(data);
var table = $('#tableCurrent');
var trHTML = '';
$('#tableCurrent').empty();
$.each(data, function(i, item){
therapistID = item.therapist_id;
therapistName = item.therapist_name;
var tr = $('<tr></tr>');
var td1 = $('<td></td>');
var td2 = $('<td></td>');
var checkbox = $('<input type="checkbox" name="cchkbox" id="cchkbox" value="' + therapistID + '" >').click(function(){
var theraID = $(this).val();
//assign therapist to client
$.post("api.php/removesave", {clientID: clientID, therapist: theraID}).done(function(data){
//refresh the available table which would run $.post("api.php/atherapists) again
getCTherapists(clientID);
getATherapists(clientID);
});
});
tr.append(td1.append(checkbox)).append(td2.append(therapistName));
table.append(tr);
});
});
};
getATherapists(clientID);
getCTherapists(clientID);
【问题讨论】：
-
动态添加复选框时，请使用
$(document.body).on('change', '#achkbox', function() { alert($(this).attr('value')); });
标签： php jquery checkbox mysqli