How to add checkboxes dynamically to the table in javascript

Question

I have a problem in how to add checkboxes dynamically to the javascript code. I have different scenario. I am getting data through ajax So I need to add table thead in the javascript rather than the html. But now I want to add Checkboxes to my thead. Indeed I added them but I don't know how to check them all with one checkbox. I write also code for that to select all but thats only working when my thead is in the html. Below is my code and it will give you a clear view. Try to read it in the editor because its a more compicated :)

//Javascript

$(document).ready(function() {

  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
  });

  $('select[name="class_id"]').on('change', function() {
    var classID = $(this).val();
    if (classID) {

      $.ajax({

        url: '/attendance/ajax/' + classID,
        type: "GET",
        dataType: "json",
        success: function(data) {

          var markup = '';
          markup += '<tr><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 2%" class="align-middle text-center">#</th> <th style="width: 15%" class="text-center">Student ID<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Student Name<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Attendance<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Date<input type="text" class="form-control" disabled></th> <th style="width: 15%;" class="align-middle text-center">Actions</th> <tr>';

          $.each(data, function(key, value) {

            markup += '<tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]"></td> <td><input type="hidden" value="' + value.id + '" name="id[]">' + value.id + '</td> <td><input type="hidden" value="' + value.student_id + '" name="student_id[]">' + value.student_id + '</td> <td><input type="hidden" value="' + value.first_name + '" name="first_name[]"><input type="hidden" value="' + value.last_name + '" name="last_name[]">' + value.first_name + ' ' + value.last_name + '<td><input type="hidden" value="' + value.attendance + '" name="attendance[]">' + value.attendance + '</td>' + '<td><input type="hidden" value="' + value.created_at + '" name="created_at[]">' + value.created_at + '</td>' + '<td style=" width=12%" class="text-center"> <a><button title="Edit" class="btn btn-outline-primary"><span class="fas fa-pencil-alt"></span></button></a> </td>' + '</td> <tr>';

          });
          $('table[id="studentsData"]').html(markup);
        }
      });
    }
  });
});

//For selecting all checkboxes

$(document).ready(function() {

  $('#options').click(function() {

    if (this.checked) {
      $('.checkBoxes').each(function() {
        this.checked = true;
      });
    } else {
      $('.checkBoxes').each(function() {
        this.checked = false;
      });
    }

  });

});

marcobiedermann · Accepted Answer · 2019-04-06 10:28:44Z

1

The issue is the execution of event handlers on DOM elements. The browser renders and executes code from top to bottom (in most cases). This means that you execute $('#options').click() before you add all checkboxes via Ajax request. Therefore you are trying to attach an event handler to elements which are not present at that moment of time. To make it work, you have to add an event listener to the parent element

$('table[id="studentsData"]').on('click', '#options', function() {})

Source: http://api.jquery.com/on/

The second argument is a selector you are going to target

answered Apr 6, 2019 at 10:28

marcobiedermann

4,9635 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hasnain Kahn Over a year ago

But let me clear one thing more. I have also something like for searching in the table. But now my table thead is in javscrpit so it also cannot work. What i can do for that ? Tell me if you wanna see some code

marcobiedermann Over a year ago

Could you please open up a new question for this with a short code example and a jsbin / jsfiddle / codepen demo. I know this does not answer your specific question but if you are adding more complexity I would look for a plugin / lib which already does the job. Have a look at the following if that might work for you: DataTables: datatables.net tablesort: tristen.ca/tablesort/demo List.js: listjs.com/docs

Hasnain Kahn Over a year ago

Ok I am going to make a new question for that and explain it then i will give you the link for that :)

Hasnain Kahn Over a year ago

stackoverflow.com/questions/55557371/…

Hasnain Kahn Over a year ago

This is the link. Pls check this out

Collectives™ on Stack Overflow

How to add checkboxes dynamically to the table in javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related