CODEWITHSUNDEEP
javascriptjqueryhtmldomcheckbox
mfay
mfay

Reputation: 53

Find first td, of every select checkbox

I have a table as follows:

<table id="testTable" class="mainTable">
    <thead>
        <tr>
            <th>Title</th>
            <th>
                Select All
                <input type="checkbox" id="select_all">
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 2</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td><input type="checkbox" class="checkbox"></td>
        </tr>
    </tbody>
</table>

Currently, my JS code will get all first td elements from the table regardless of the checkbox, code is as follows:

$("#testTable tr").each(function() {
    firsttd += $(this).find("td:first").html() + "\n";
});

However, I need to modify this so that my JS code will only get the first td element of the checked checkbox row.

Upvotes: 2

Views: 2741

Answers (7)

ElLocoCocoLoco
ElLocoCocoLoco

Reputation: 385

$(document).ready(function() {
  var firsttd = "";
  $("#testTable tr td input:checkbox:first-child:checked").each(function()   
  {
     firsttd += $(this).parent().parent().find("td:first").html() + "\n";
  });
  console.log(firsttd);
});

Fiddle here

Upvotes: 0

Niklesh Raut
Niklesh Raut

Reputation: 34914

To get the first td of the checked checkbox

var elems = $("#testTable tr td input[checked]");
var str = "";
for(var i=0;i<elems.length;i++){
  str += $(elems[i]).parent().parent().text()+"\n";
}
console.log(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
  <tr><th>Title</th><th>Select All <input type="checkbox" id="select_all"></th></tr>
</thead>
<tbody>
  <tr><td>Cell 1</td><td><input type="checkbox" class="checkbox"></td></tr>
  <tr><td>Cell 2</td><td><input checked type="checkbox" class="checkbox"></td></tr>
  <tr><td>Cell 3</td><td><input checked type="checkbox" class="checkbox"></td></tr>
  <tr><td>Cell 4</td><td><input type="checkbox" class="checkbox"></td></tr>
</tbody>

Upvotes: 0

4b0
4b0

Reputation: 22323

Find checkbox check it is checkd or not if it checked find its parents first td value in your variable.

var firsttd = '';
$("#testTable tbody tr td").each(function() {
  if ($(this).find('input[type=checkbox]').is(":checked"))
    firsttd += $(this).parent('tr').find("td:first").html() + "\n"
});
console.log(firsttd);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
  <thead>
    <tr>
      <th>Title</th>
      <th>Select All
        <input type="checkbox" id="select_all">
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>
        <input type="checkbox" class="checkbox" checked='checked'>
      </td>
    </tr>
    <tr>
      <td>Cell 2</td>
      <td>
        <input type="checkbox" class="checkbox">
      </td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>
        <input type="checkbox" class="checkbox" checked='checked'>
      </td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>
        <input type="checkbox" class="checkbox">
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

try this code with $(this).find(':checkbox').is(':checked') 

$(document).ready(function() {

  $(this).click(function() {
    var firsttd = "";
    $("#testTable > tbody > tr").each(function() {
      if ($(this).find(':checkbox').is(':checked'))
        firsttd += $(this).find("td:first").html() + "\n";

    });
    console.log(firsttd);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
  <thead>
    <tr>
      <th>Title</th>
      <th>Select All <input type="checkbox" id="select_all"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 2</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
  </tbody>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could add the condition directly on your selector like :

$("#testTable :checkbox:checked").each(function() {
    firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});

Or if you're really in need of the loop and since you're using jQuery you could use .is(':checked') like :

if ( $(this).find(':checkbox').is(':checked') ) 
{
     firsttd += $(this).find("td:first").html() + "\n";
}

Hope this helps.

var firsttd = "";

$("#testTable :checkbox:checked").each(function() {
  firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});

console.log(firsttd);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="testTable" class="mainTable" border=1>
  <thead>
    <tr>
      <th>Title</th>
      <th>Select All <input type="checkbox" id="select_all"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td><input type="checkbox" class="checkbox" checked></td>
    </tr>
    <tr>
      <td>Cell 2</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td><input type="checkbox" class="checkbox" checked></td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td><input type="checkbox" class="checkbox"></td>
    </tr>
  </tbody>

Upvotes: 3

Zenoo
Zenoo

Reputation: 12880

You can simply only select the checked checkboxes directly in the JQuery selector with :checked :

$('#testTable tr input[type="checkbox"]:checked').each(function(){
    firsttd += $(this).closest('tr').children().first().html()+"\n";
});

Upvotes: 0

3Dos
3Dos

Reputation: 3487

Is this what you try to accomplish ? :

$("#testTable tr").each(function(){
    firsttd += $(this).find('input[type="checkbox"]:selected').parent().html()+"\n";
});

Upvotes: 0

Related Questions