JQuery AJAX - обновление с помощью флажка не работает

Question

Я хочу создать список работ в реальном времени.поэтому при добавлении нового списка он будет увеличиваться в режиме реального времени или после завершения задания пользователь сможет проверить список в режиме реального времени.так что другие пользователи, которые подключены к моему веб-сайту, будут знать в режиме реального времени без обновления страницы.

пока добавление списка заданий работает нормально, но при этом проверено не работает.функция проверяется, если она делает это менее чем за 1 секунду.когда это проверено, статус списка работ будет обновлен до 1, используя код php.но проблема в том, что флажок не работает.

вот мой HTML-код:

  <div class="container-todolist">


          <ul class="todo-list">
            <?php foreach ($tampiltodolist as $list): ?>


            <li class="<?php if ($list['status']==='1') {
              echo " checked";
            }else {
              echo " notchecked";
            } ?>">
              <!-- drag handle -->
              <span class="handle">
                    <i class="fa fa-ellipsis-v"></i>
                    <i class="fa fa-ellipsis-v"></i>
                  </span>
              <!-- checkbox -->
              <input type="checkbox" id="checkbox" <?php if ($list['status']==='1') {
                echo "checked";
              } ?> name="status" value="<?php echo $list['nolist']; ?>">
              <!-- todo text -->
              <span class="text"><?php echo $list['isi']; ?></span>
              <!-- Emphasis label -->
              <small class="label label-danger"><i class="fa fa-clock-o"></i>
                <?php $tanggal=$list['tanggal'];
                  $waktu =$list['waktu'];
                echo time_elapsed_string("$tanggal $waktu");
               ?>
              </small>
              <!-- General tools such as edit or delete-->
              <div class="tools">
                <i class="fa fa-edit"></i>
                <i class="fa fa-trash-o"></i>
              </div>
            </li>
            <?php endforeach; ?>
          </ul>

            </div>

вот мой код JavaScript:

<script type="text/javascript">
        const urlList="<?php echo site_url('Todolist/NewtodoList') ?>";
      $(document).ready(function(){
        const url="<?php echo site_url('Todolist/Addtodolist') ?>";
        const urlList="<?php echo site_url('Todolist/NewtodoList') ?>";
        const urlCheck ="<?php echo site_url('Todolist/checkedlist') ?>";

        $('#formtodolist').on('submit',function(e){

    e.preventDefault();
    if (!$('#isi-text').val()) {
      $('#isi-text').addClass('isInValid');
    }else {
    $.ajax({
      type:"POST",
      url:url,
      data:$(this).serialize(),
      success:function(data){
        $('#todolist').modal('hide');
        $('#isi-text').removeClass('isInValid'),
        $('#isi-text').val('');

      },
    })
    }
    });
    //$('#checkbox').on('click',function(){
    $('input:checkbox').on('change',function(){
    const checkdata= $(this).val();

      if ($(this).prop('checked')) {

        $.ajax({
          type:"POST",
          url:urlCheck,
          data:{"checkdata":checkdata},
          success(function(data){
            $('.container-todolist').load(urlList);
          })
        });
      }
    });


      });
      function updateList(){
          $('.container-todolist').load(urlList);

      }

      setInterval('updateList()',1000);

    </script>

Answer 1

Вы должны обновить селектор:

$(document).on('change','input:checkbox',function(){
const checkdata= $(this).val();

  if ($(this).prop('checked')) {

    $.ajax({
      type:"POST",
      url:urlCheck,
      data:{"checkdata":checkdata},
      success(function(data){
        $('.container-todolist').load(urlList);
      })
    });
  }
});

Answer 2

Это должно работать для вас

$('input:checkbox').on('change',function(){
        const checkdata= $(this).val();

          if ($(this).prop('checked')) {

            $.ajax({
              type:"POST",
              url:urlCheck,
              data:{"checkdata":checkdata},
              success(function(data){
                $('.container-todolist').load(urlList);
              })
            });
          }
        });