Question

我有一组从$ .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);
   });


});

编辑2/23/2017 9:55 am

使用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);

Answer 1

http://jsfiddle.net/

$(document).ready(function() {
  var data = [
		{therapist_id: 'id1', therapist_name: 'nam1'},
    {therapist_id: 'id2', therapist_name: 'nam2'},
    {therapist_id: 'id3', therapist_name: 'nam4'},
];
var table = $('#tableAvailable');
 var trHTML = '';
  $.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(){
      	console.log( $( this ).val() );
        alert($( this ).val());
      });
      tr.append(td1.append(checkbox)).append(td2.append(therapistName));
      table.append(tr);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="tableAvailable" >
 
 </table>

o2gxgz9r / 3154 /＃＆安培; togetherjs = JtIhtUULoM

尝试这样的事情

    var renderTable = function renderTable(data){
    var data = JSON.parse(data);

        var table = $('#tableAvailable');
        var trHTML = '';
        table.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
                renderTable(data);
               });


            });

         tr.append(td1.append(checkbox)).append(td2.append(therapistName));
         table.append(tr);
       });

};

$.post("api.php/atherapists", {clientID: clientID}).done(function(data){
        renderTable(data);
    });

从$ .post结果创建的复选框中获取价值

1 个答案: