Get the text of td with specific id when checkbox is checked within the same row each time

Question

Is there a way to get the text of a td from the same row as a checkbox ,when that checkbox is checked?

For example in this table:

<tr id="1">
    <td id="date"> Mon, 20 Feb 2017 </td>
    <td id="from" >mymail@gmail.com </td>
    <td id="subject"> Hello World! </td>
    <td> <input id ={{d.id}} type="checkbox" name="mycheckbox"/> </td>
</tr>
<tr id="2">
    <td id="date"> Sun, 19 Feb 2017 </td>
    <td id="from" >mymail@gmail.com </td>
    <td id="subject"> Hello again World! </td>
    <td> <input id ={{d.id}} type="checkbox" name="mycheckbox"/> </td>
</tr>

If I click the checkbox on the second row,I want to alert the subject of that row ,which is "Hello again World".

So far I have tried with .parent() , .siblings() and closest() ,but no luck.

Answer 1

A valid HTML shouldn't have duplicate Id's. I have updated your html by replacing Id's with class.

Try this

$(document).ready(function() {
  $("input:checkbox").change(function(index){  
   alert($(this).closest('tr').find('td.subject').text())
  });
})

Working Fiddle

Answer 2

The way I do it is using a custom data attribute (note that I fixed the "id" issues from your code):

 $("input[name='mycheckbox']").click(function(event){ var row=$(event.target).data('row'); console.log(row); var subject=$('#'+row+' .subject').text(); console.log(subject); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id="1"> <td class="date"> Mon, 20 Feb 2017 </td> <td class="from" >mymail@gmail.com </td> <td class="subject"> Hello World! </td> <td> <input type="checkbox" name="mycheckbox" data-row="1"/> </td> </tr> <tr id="2"> <td class="date"> Sun, 19 Feb 2017 </td> <td class="from" >mymail@gmail.com </td> <td class="subject"> Hello again World! </td> <td> <input type="checkbox" name="mycheckbox" data-row="2"/> </td> </tr> </table> 

Answer 3

I'd used this way:

<table id="table">
<tr>
    <td> Mon, 20 Feb 2017 </td>
    <td>mymail@gmail.com </td>
    <td class="subject"> Hello World! </td>
    <td> <input type="checkbox" /> </td>
</tr>
<tr>
    <td> Sun, 19 Feb 2017 </td>
    <td>mymail@gmail.com </td>
    <td class="subject"> Hello again World! </td>
    <td> <input type="checkbox" /> </td>
</tr>  
</table>
<script>
  $('#table').on('click',':checkbox',function(){
    alert($(this).closest('tr').find('.subject').text());
  });
</script>

PS: i have removed all unused info for this case to be clear

id attribute must be unique over whole html document, never use same id for multiple elements.

Answer 4

The id attribute should be unique in document. You can use class attribute instead. However you can select target element by bottom code.

$("#2 [name='mycheckbox']").click(function(){
  alert($(this).parent().prev().text());
});

 $("#2 [name='mycheckbox']").click(function(){ console.log($(this).parent().prev().text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id="1"> <td id="date"> Mon, 20 Feb 2017 </td> <td id="from" >mymail@gmail.com </td> <td id="subject"> Hello World! </td> <td> <input id ={{d.id}} type="checkbox" name="mycheckbox"/> </td> </tr> <tr id="2"> <td id="date"> Sun, 19 Feb 2017 </td> <td id="from" >mymail@gmail.com </td> <td id="subject"> Hello again World! </td> <td> <input id ={{d.id}} type="checkbox" name="mycheckbox"/> </td> </tr> </table> 

Answer 5

This works without jquery

Array.prototype.slice.call(
   document.querySelectorAll('[type="checkbox"]')
).forEach(
   function(i){
      i.onclick = function(){
         alert(this.parentElement.parentElement.querySelector('#subject').innerHTML)
      }
});

https://jsfiddle.net/jvhdx85u/

Answer 6

you can use a trick for this(which i use most often in many other cases)

  <tr id="1">
        <td id="date"> Mon, 20 Feb 2017 </td>
        <td id="from" >mymail@gmail.com </td>
        <td id="subject_t1"> Hello World! </td> <!--check the subject id and input id-->
        <td> <input id ="t1" class="your_class" type="checkbox" name="mycheckbox"/> </td>
    </tr>
    <tr id="2">
        <td id="date"> Sun, 19 Feb 2017 </td>
        <td id="from" >mymail@gmail.com </td>
        <td id="subject_t2"> Hello again World! </td>
        <td> <input id ="t2" class="your_class" type="checkbox" name="mycheckbox"/> </td>
    </tr>

here is the jquery you can use.

<script>$(document).on('click','.your_class',function(){
 var checkbox_id = $(this).attr('id'); //getting id of this clicked checkbox
 var subject_id = "#subject_"+checkbox_id; //making subject id from this as we already made a simple pattern for the id of subject
alert($(subject_id).text()); //i am using the text in alertbox you can do what you want with it
});