javascripthtmljqueryajax

how to uncheckbox in data table when button in table click


I have code like this

<table id='data-table'>
 <thead>
   <tr>
     <th>No</th>
     <th>Name Items</th>
     <th>Qty</th>
     <th>Price</th>
     <th>Action</th>
     <th>Check</th>
   </tr>
 </thead>
 <tbody>
   <php foreach($data as $d) : ?>
     <tr>
     <td><?= $no++ ?></td>
     <td><?= $d['name'] ?></td>
     <td><?= $d['qty'] ?></td>
     <td><?= $d['price'] ?></td>
     <td><button type='button' class='btn' name='up'>up</button></td>
     <td><input type='checkbox'></td>
     </tr>
   <php endforeach ?>
 </tbody>

</table>

I want when click button, that qty update data and checkbox if that check then uncheck, I'm use jquery like this but i don't know how can i uncheckbox when button click. Thank you in advance

 $('#data-table tbody').on('click', '.btn[name="up"]', function() {
    const row = $(this).closest('tr')[0];
    const qty = Number(row.cells[2].innerHTML);
    const tqty = qty + 1;
    row.cells[2].innerHTML = tqty;
  });

Solution

  • You should use jQuery all the way or not at all

    Also you are missing <tr></tr>

    $('#data-table tbody').on('click', '.btn[name="up"]', function() {
      const $row = $(this).closest('tr');
      const $cells = $row.find("td");
      const $qtyCell = $cells.eq(2);
      const qty = +$qtyCell.text()
      $qtyCell.text(qty + 1);
      $cells.eq(5).find("[type=checkbox]").prop("checked",false);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <table id='data-table'>
      <thead>
        <tr>
          <th>No</th>
          <th>Name Items</th>
          <th>Qty</th>
          <th>Price</th>
          <th>Action</th>
          <th>Check</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Name 1</td>
          <td>5</td>
          <td>2.00</td>
          <td><button type='button' class='btn' name='up'>up</button></td>
          <td><input type='checkbox'></td>
        </tr>
        <tr>
          <td>2</td>
          <td>Name 2</td>
          <td>8</td>
          <td>4.00</td>
          <td><button type='button' class='btn' name='up'>up</button></td>
          <td><input type='checkbox'></td>
        </tr>
      </tbody>
    </table>