javascript - 除表头外的表无法正常工作 html

Question

当单击标题中的复选框时，我一直尝试选择表格中的所有复选框，但问题是当我尝试提交所有选定的列表时，它包含复选框标题。我想要的只是 tbody 应该返回值

what I've already tried, I change

  $(':checkbox:checked')each(function(i){
        id[i]=$(this).val()
      })

To this , but not working

$(':checkbox:checked')not('thead tr').each(function(i){
        id[i]=$(this).val()
   })

my table

<button type="submit" id="update_btn" class="btn btn-secondary round btn- 
    min-width mr-1 mb-1" >Update Tag</button>
<table class="table" name="table" id="table">
            <thead>
              <tr >
                <th >No</th>
                <th><input type="checkbox" onClick="toggle(this)" /></th>
                <th>ID Number</th>
                <th >Name</th>
                <th >Barangay</th>
                <th >Sex</th>
                <th >Sector</th>
                <th Amount</th>
                <th >Signature/Thumb Marks</th>
                <th >ID Presented/ Date & Issuance</th>
                <th>Date Received</th>
                <th >Remarks</th>
              </tr>
            </thead>
            <tbody class="report-content">
                {% csrf_token %}
                {% for user_information in benefeciaries %}
              <tr id="{{user_information.id}}">
                <td></td>
                <td><input type="checkbox" name="product_id[]" value=" 
                {{user_information.id}}" 
                id="delete_product"></td>
                <td>{{user_information.covid_id}} </td>
                <td>{{user_information.lastname}}, 
                 {{user_information.firstname}} 
                {{user_information.middle}}</td>
                <td width="5%">{{user_information.barangay}}</td>
                <td></td>
                <td ></td>
                <td>{{user_information.amount|floatformat:2|intcomma}} 
               </td>
                <td></td>
                <td ></td>
                <td ></td>
                <td></td>
              </tr>
              {% endfor %}  
            </tbody>
          </table>

my javascript

  $(document).ready(function(){
  $('#update_btn').click(function(){
    if(confirm("Are you sure ?")){
      var id =[];
      var csrf=$('input[name=csrfmiddlewaretoken]').val();    
      $(':checkbox:checked').each(function(i){ //I think this is the 
       problem
        id[i]=$(this).val()
      })
      console.log(id)
      $.ajax({
          url:"/update/",
          method:"POST",
          data: {
            id,
            'prov':"{{province}}",
            'muni':"{{municipal}}",
            csrfmiddlewaretoken:csrf
          },
          success:function(response){       
            url:"/dashboard/" 
            // Swal.fire({title:"Successfully saved!",text:"Mark As 
          Paid",type:"success",confirmButtonClass:"btn btn- 
          success",buttonsStyling:!1})
          }
        })
      
    }
  })
});

Answer 1

如果您只想选择 tbody 元素中的复选框，请将其包含在选择器中:

$('tbody :checkbox:checked')

此外，您可以使用 map() 而不是 each() 来简化创建选定复选框值数组的逻辑。试试这个:

let id = $('tbody :checkbox:checked').map((i, el) => el.value).get();`

这是完整的示例，没有对逻辑进行一些其他改进:

jQuery($ => {
  $('#update_btn').click(function() {
    if (!confirm("Are you sure ?"))
      return;

    let csrf = $('input[name=csrfmiddlewaretoken]').val();
    let id = $('tbody :checkbox:checked').map((i, cb) => cb.value).get();

    $.ajax({
      url: "/update/",
      method: "POST",
      data: {
        id,
        'prov': "{{province}}",
        'muni': "{{municipal}}",
        csrfmiddlewaretoken: csrf
      },
      success: function(response) {
        url: "/dashboard/"
        /*
        Swal.fire({
          title: "Successfully saved!",
          text: "Mark As Paid",
          type: "success",
          confirmButtonClass: "btn btn-success",
          buttonsStyling: false
        })
        */
      }
    });
  })
});