I want the ajax data to be passed to the add_teacher function in views.py when the "Add Teacher" button is clicked. path('student/add_teacher/', views.add_teacher, name='add_teacher'),

If only the code below is executed, the value is output to the console.

  $(function () {
    $checkbox = $('.Checked');
    $checkbox.click(checkArray);

    function checkArray(){
        var chkArray = [];
        chkArray = $.map($checkbox, function(el){
            if(el.checked) { return el.id };
        });
        console.log(chkArray);
    }
 );

But when I add a button click condition, the function doesn't work.

$(function () {
    $('button.addteacher').on('click',function () {
        $checkbox = $('.Checked');
        $checkbox.click(checkArray);

        function checkArray(){
            var chkArray = [];
            chkArray = $.map($checkbox, function(el){
                if(el.checked) { return el.id };
            });
            console.log(chkArray);

            $.ajax({
              url: "/student/add_teacher/",
              type: "post",
              data: {'chkArray' : chkArray},
              headers: { "X-CSRFToken": "{{ csrf_token }}" },
            });
        }
    });
});

The html file looks like this:

       <table id="student-list" class="maintable">
        <thead>
           <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Select</th>
          </tr>
        </thead>

        <tbody>
          {% for student in students %}
          <tr class="student">
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.sex }}</td>
            <td><input type="checkbox" class="Checked" id="{{ student.id }}"></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <button type="button" class="btn btn-secondary addteacher">Add Teacher</button>