Checkboxes inside a table with php foreach

Question

I have a pretty much simple issue with a table i create with PHP foreach (in codeigniter).

One column inside the table has 2 checkboxes. One true and one false so when i create the table has some names and infos and then 2 checkboxes. Whenever the user clicks the true I create an AJAX POST call to my database to change the state of a column. But when the user has clicked true and then he clicks false I want the true checkbox to be unchecked.

Here is the code

<table class="responstable">  
  <tr>  
    <th>ID</th>
    <th><span>Name</span></th>
    <th>number1</th>
    <th>number2</th>
  </tr>

  <?php
  foreach($students as $column => $data ) { ?>
  <tr>    
    <td><?php echo $data[0]->Userproperties_UserAM; ?></td>
    <td><?php echo $data[0]->Userproperties_UserFullName; ?></td>
    <td><?php echo $data[0]->UserAbsence; ?></td>
    <td> <input class="true" id="<?php echo $data[0]->Userproperties_UserId; ?>" type='checkbox' value="<?php echo $data[0]->Userproperties_UserAM; ?>" />
  <label for='true'>
    <span></span>
    True    
  </label>  
  <input class="false" id="<?php echo $data[0]->Userproperties_UserId; ?>" type='checkbox' value="<?php echo $data[0]->Userproperties_UserAM; ?>" />
  <label for='false'>
    <span></span>
    False  
  </label></td>
  </tr>
<?php   } ?>
</table>

And the ajax code

$(document).ready(function() {
    $('.true').change(function() {
       if($(this).is(":checked")) {
           $('.false').attr('checked', false);
                  var moduleid = <?php echo $moduleid; ?>;
                  var teacherid = <?php echo $teacherid; ?>;
                    var studentid = $(this).attr('id');
                    var weeknum = $("#dropi").val();
                    jQuery.ajax({
                        type: "POST",
                        url: "<?php echo base_url(); ?>" + "index.php/TeacherParousies/send_parousia",
                        data: {
                            moduleid: moduleid,
                            studentid: studentid,
                            teacherid: teacherid,
                            parousia: 1,
                            weeknum: weeknum
                        },
                        success: function(res) {
                        },
                        error: function(err) {
                        }
                    });
                } 
           });
           $('.false').change(function() {
               if($(this).is(":checked")) {
                $('.true').attr('checked', false);
                  var moduleid = <?php echo $moduleid; ?>;
                  var teacherid = <?php echo $teacherid; ?>;
                    var studentid = $(this).attr('id');
                    var weeknum = $("#dropi").val();
                    jQuery.ajax({
                        type: "POST",
                        url: "<?php echo base_url(); ?>" + "index.php/TeacherParousies/send_parousia",
                        data: {
                            moduleid: moduleid,
                            studentid: studentid,
                            teacherid: teacherid,
                            parousia: 0,
                            weeknum: weeknum
                        },
                        success: function(res) {
                        },
                        error: function(err) {
                        }
                    });
               }
    });
});

The problem here is that when i check the 2nd row of the table's checkbox lets say false, there is a change on the 1st row for true if it is checked.

Although I have stated

if($(this).is(":checked"))

Any idea?

Answer 1

In your case it .false and .true will uncheck all. You just need to check the nearest element.

Kindly replace the code $('.true').attr('checked', false); with this code $(this).closest( "td" ).find('.true').attr('checked', false);

and do same with for $('.false').attr('checked', false); this $(this).closest( "td" ).find('.false').attr('checked', false);