Я пытался получить идентификатор флажка с помощью jquery, но это не удалось. интересно, в чем проблема

Question

Я пытался получить идентификатор флажка с помощью jquery, но это не удалось.Я не знаю почему, но спасибо, дайте мне знать, в чем проблема

Я хочу знать, что вызвало проблему

шаблон django (todo_list.html)

        {% for p in object_list %}
        <tr>
            <td>
                <input type="checkbox" id="{{p.pk}}" class="td_check">
            </td>
            <td>{{p.classification}}</td>
            <td>
                <a href="" id={{p.id}} class="title_for_list">
                    {{p.title}}
                </a>
            </td>
            <td>{{p.now_diff}}</td>
            <!-- <td>{{p.author}}</td> -->
            <td>
            </td>
        </tr>
        {% endfor %}
    {% else %}
        <tr>
            <td colspan="5">
                <h4>no article</h4>
            </td>
        </tr>

JQuery

$('#todo_delete_button').click(function(e){
    e.preventDefault();
    // todo_check
    var todo_arr = [];
    alert("delete button is clicked")
    // Get checked checkboxes
    $('.td_check input[type=checkbox]').each(function() {
      if (jQuery(this).is(":checked")) {
        var id = this.id;
        alert("id : " +id)
        todo_arr.push(id);
        alert('todo_arr : ', todo_arr)
      }
    });
})

Answer 1

Проблема в том, что ваш селектор неверен;Сами флажки имеют класс .td_check, но ваш селектор ищет флажки как дочерние элементы этого класса.Исправьте селектор, и ваш код будет работать:

$('.td_check').each(function() { 
  // ...
});

Сказав это, вы можете упростить свой код, используя селектор :checked для удаления условия if и map() для построения массива,Попробуйте это:

$('#todo_delete_button').click(function(e) {
  e.preventDefault();

  var todo_arr = $('.td_check:checked').map(function() {
    return this.id
  }).get();
  console.log(todo_arr);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr><td><input type="checkbox" id="a" class="td_check" checked="true"></td></tr>
  <tr><td><input type="checkbox" id="b" class="td_check"></td></tr>
  <tr><td><input type="checkbox" id="c" class="td_check" checked="true"></td></tr>
  <tr><td><input type="checkbox" id="d" class="td_check"></td></tr>
  <tr><td><input type="checkbox" id="e" class="td_check" checked="true"></td></tr>
</table>
<button id="todo_delete_button">Click me</button>