samedi 6 août 2022

How can I set checkbox to checked in a datatable column when a master checkbox is checked

I have a datatable for class attendance that is comprised of a student name and 4 columns of checkboxes per row. The Select All column is for the user to dynamically set checked/unchecked attribute for the remaining checkboxes in the row. Ultimately, the form will be saved and the database updated with the value of the checkboxes. When the form is presented, the database does not contain a record of what is presented to the user, it will be inserted when the form is saved.

Select All  Student Name    On Time  Present  Contributing  Prep Lesson 
     x      Mickey Mouse        o       o          o            o

HTML:

<table id="UserTable" class="table table-bordered"> 
    <thead>
      <th style="text-align:center;">Select All</th>
      <th style="text-align:center;">Student Name</th>
      <th style="text-align:center;">On Time</th>
      <th style="text-align:center;">Present</th>
      <th style="text-align:center;">Contributing</th>
      <th style="text-align:center;">Prep. Lesson</th>
    </thead>

    <tbody>
        <?php if(!empty($students)) { ?>
        <?php foreach($students as $student) { ?>
          <tr>
            <div class="container content">
              <!-- select all -->
              <td style="text-align:center;"><input type="checkbox" id="select-all" onchange="selectAll(this)"></td>
              <!-- student -->
              <td class="student-name"><?php echo $student['first_name'] . ' ' . $student['last_name'] ?></td>
              <!-- on-time -->
              <td class="on-time" style="text-align:center;"><input type="checkbox" id="on-time"></td>
              <!-- Present -->
              <td class="present" style="text-align:center;"><input type="checkbox" id="present"></td>
              <!-- contributing -->
              <td class="contribute" style="text-align:center;"><input type="checkbox" id="contribute"></td>
              <!-- prepared lesson -->
              <td class="prep-lesson" style="text-align:center;"><input type="checkbox" id="prep-lesson"></td>            
          </tr>  
      <?php }} ?>
    </tbody>
</table>
Attempts at Javascript code which do not work:
<script type="text/javascript">

      $(document).ready(function(){
        $('#UserTable').DataTable();
      });

      $('#UserTable tbody').on( 'click', 'tr td:eq(0)', function () {
        //var onTime = $(this).parents('#userTable tbody").siblings('#on-time');         
        //$(onTime).attr('checked', true);
        alert("col1");
      });

      function selectAll(elem) {
        alert('in onChange');
        var table = $('#UserTable').DataTable();
        if(elem.checked) {
          // var onTime = $(this).parents('#userTable tbody').siblings('.on-time');     
          // var colData = table.column(this).data();          
          // $(onTime).attr('checked', true);

          alert('checked');
        }
        else {
          alert ('unchecked');
        }
      }
</script>
Thanks for your help,
Dennis



Aucun commentaire:

Enregistrer un commentaire