CODEWITHSUNDEEP
javascriptjquery
Ricky Reza Muhammad
Ricky Reza Muhammad

Reputation: 373

How can i check and unchecked detect in checkboxes inside td using jquery or javascript DOM?

I want to detect if a checkbox inside a table cell is checked or not. How can i do that? Here is a screenshot when I console log using my current approach:

enter image description here

I only want the checked employee to show up.

Here is my current HTML and jQuery:

$('td').click(function() {
  var isChecked = $("td input:checkbox").checked;
  // console.log(getIndexRow);
  if (isChecked) {
    console.log('checked');
  } else {
    console.log('false');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table id="tableModul" class="w-30 table table-lg table-hover table-bordered table-striped">
  <thead class="thead-dark">
    <tr>
      <th>Department</th>
      <th>Kode Unit</th>
      <th style="width: 30px;">position_name</th>
    </tr>
  </thead>
  <tbody id="myTable">

    <tr>
      <td class="nik">DEPARTEMEN</td>
      <td class="nr">KODE UNIT</td>
      <td>
        <div class="form-check"><input type="checkbox" class="form-check-input checksboxs" style="zoom: 1.5; width:100%;"></div>
      </td>
    </tr>

    <tr>
      <td class="nik">DEPARTEMEN</td>
      <td class="nr">KODE UNIT</td>
      <td>
        <div class="form-check"><input type="checkbox" class="form-check-input checksboxs" style="zoom: 1.5; width:100%;"></div>
      </td>
    </tr>

  </tbody>
</table>

Upvotes: 0

Views: 1699

Answers (2)

Terminator-Barbapapa
Terminator-Barbapapa

Reputation: 3126

In jQuery you can use .is("checked") to check if a checkbox is checked. You can then use the value of the just checked checkbox in the rest of your code.

$( "input[type=checkbox]" ).on( "click", function() { 
    if ( $(this).is(":checked") ) { 
        console.log( $(this).val() );
    }
});
table { border-collapse: collapse; }
td { padding: 1em 2em; border: 1px solid silver; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td><label for="alice">Alice</label><input type="checkbox" name="employee" id="alice" value="Alice"></td>
        <td><label for="bob">Bob</label><input type="checkbox" name="employee" id="bob" value="Bob"></td>
        <td><label for="charlie">Charlie</label><input type="checkbox" name="employee" id="charlie" value="Charlie"></td>
    </tr>
</table>

Upvotes: 0

Karan
Karan

Reputation: 12619

To get checkbox inside clicked td you need to write $(this).find("input:checkbox").

Also to get whether checkbox is checked you need to use .is(':checked').

Try it below.

$('td').click(function() {
  var isChecked = $(this).find("input:checkbox").is(':checked');
  if (isChecked) {
    console.log('checked');
  } else {
    console.log('false');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table id="tableModul" class="w-30 table table-lg table-hover table-bordered table-striped">
  <thead class="thead-dark">
    <tr>
      <th>Department</th>
      <th>Kode Unit</th>
      <th style="width: 30px;">position_name</th>
    </tr>
  </thead>
  <tbody id="myTable">

    <tr>
      <td class="nik">DEPARTEMEN</td>
      <td class="nr">KODE UNIT</td>
      <td>
        <div class="form-check"><input type="checkbox" class="form-check-input checksboxs" style="zoom: 1.5; width:100%;"></div>
      </td>
    </tr>

    <tr>
      <td class="nik">DEPARTEMEN</td>
      <td class="nr">KODE UNIT</td>
      <td>
        <div class="form-check"><input type="checkbox" class="form-check-input checksboxs" style="zoom: 1.5; width:100%;"></div>
      </td>
    </tr>

  </tbody>
</table>

Upvotes: 1

Related Questions