Table except table header not working html

user_14385814 0
Viewed 65

Im been trying to select all checkbox in my table when clicking the checkbox in my header but the problem is when I try to submit all selected list it include the checkbox header. What I want is only the tbody should return value

enter image description here

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})
          }
        })
      
    }
  })
});
html jquery ajax javascript
1 Answers

If you only want to select the checkboxes in the tbody element, include that in the selector:

$('tbody :checkbox:checked')

In addition you can simplify the logic to create the array of selected checkbox values by using map() instead of each(). Try this:

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

Here's the complete example without some other improvements to the logic:

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

user_5194130
Related