如何在JavaScript中將復選框動態添加到表中

Question

我在如何將復選框動態添加到javascript代碼時遇到問題。 我有不同的情況。 我正在通過ajax獲取數據，所以我需要在javascript中而不是html中添加table thead。 但是現在我想將復選框添加到我的劇場中。 的確，我添加了它們，但是我不知道如何通過一個復選框將它們全部選中。 我也為此編寫代碼以選擇所有內容，但僅當我的thead在html中時才有效。 下面是我的代碼，它將為您提供清晰的視圖。 嘗試在編輯器中閱讀它，因為它比較復雜:)

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

//用於選中所有復選框

$(document).ready(function() {

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

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

  });

});

Answer 1

問題是在DOM元素上執行事件處理程序。 瀏覽器從上到下渲染並執行代碼（大多數情況下）。 這意味着您需要先執行$('#options').click()然后再通過Ajax請求添加所有復選框。 因此，您試圖將事件處理程序附加到當時不存在的元素上。 要使其工作，您必須向父元素添加一個事件偵聽器

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

資料來源： http ： //api.jquery.com/on/

第二個參數是您要定位的選擇器