How to get to button attr in other td in the same row by checkbox if checked?

Question

Table looks like this:

<table class="table3">
                <tbody><tr>
                    <td>
                        <input id="checkall" type="checkbox">
                    </td>
                    <td>
                        Autor
                    </td>
                    <td>
                        Komentarz
                    </td>
                    <td>
                        Data dodania
                    </td>
                    <td>
                        Post
                    </td>
                    <td>
                        Status
                    </td>
                </tr>
                                <tr>
                    <td>
                        <input type="checkbox" name="comment[]" value="1">
                    </td>
                    <td>
                        cipka<br>cipuszka@o2.pl                 </td>
                    <td>
                        sadasdsad                   </td>
                    <td>
                        2017-06-03                  </td>
                    <td>
                        Przykładowy Tytuł Strony                    </td>
                    <td>
                        <button id="1" class="yellow-button btn">Odpublicznij</button><button id="1" class="red-button btn">Usuń</button>                   </td>
                </tr>
                                <tr>
                    <td>
                        <input type="checkbox" name="comment[]" value="5">
                    </td>
                    <td>
                        Cipenia<br>Cifuszka@o2.pl                   </td>
                    <td>
                        aoskdopaskdop



                    </td>
                    <td>
                        2017-06-04                  </td>
                    <td>
                        Przykładowy Tytuł Strony                    </td>
                    <td>
                        <button id="5" class="yellow-button btn">Odpublicznij</button><button id="5" class="red-button btn">Usuń</button>                   </td>
                </tr>
                                <tr>
                    <td>
                        <input type="checkbox" name="comment[]" value="11">
                    </td>
                    <td>
                        54345345<br>                    </td>
                    <td>
                                            </td>
                    <td>
                        0000-00-00                  </td>
                    <td>
                        Burde lubie kielbaske se zjesc!                 </td>
                    <td>
                        <button id="11" class="yellow-button btn">Odpublicznij</button><button id="11" class="red-button btn">Usuń</button>                 </td>
                </tr>
                                <tr>
                    <td>
                        <input type="checkbox" name="comment[]" value="25">
                    </td>
                    <td>
                        234324234<br>                   </td>
                    <td>
                                            </td>
                    <td>
                        0000-00-00                  </td>
                    <td>
                        Burde lubie kielbaske se zjesc!                 </td>
                    <td>
                        <button id="25" class="yellow-button btn">Odpublicznij</button><button id="25" class="red-button btn">Usuń</button>                 </td>
                </tr>
                            </tbody></table>

I have many checkboxes.

We have some checkboxes. How to get to button's attribute in the same row as checked checkbox and change this button's class?

I have this to get all checked checkboxes $("input[type=checkbox]:checked")

But how to change now all button's classes in these rows where checkbox is checked?

I tried $("input[type=checkbox]:checked").closest('button').attr('class', 'new_class'); but it doesn't work.

$("input[type=checkbox]:checked").parent().closest('button').attr('class', 'new_class'); doesn't work too.

Answer 1

closest traverses up the DOM tree until it hits the given selector. find traverses down

So you should use closest to get table row, and then use find to go back down the ancestry chain and get the button(s).

$('input[type=checkbox]').on('change',function(){
  var $checkbox = $( this );
  $checkbox.closest( 'tr' )
    .find('button')
    .toggleClass('blue',$checkbox.is(':checked'));
}).trigger('change');

I've had a play and made a codepen for you: https://codepen.io/jamespoel/pen/awGdqK

Answer 2

This is a simple logic. Here is what you need to do. Add a class when the checkbox is checked and remove that class when it is unchecked. You can achieve this by detecting the closest <tr> of the checkbox that has been clicked and then when you get this <tr> simply find the <button> tag. This will be a array of elements since you have two <button> inside a <tr> . Here you need to use JQuery each() function and add or remove class accordingly. Here is the working code that will surely help you.

 $(document).ready(function(){ $("input[type=checkbox]").click(function(){ var trButtons = $(this).closest('tr').find('button'); if($(this).prop('checked')){ $(trButtons).each(function(){ $(this).addClass('selectedButton'); }); }else{ $(trButtons).each(function(){ $(this).removeClass('selectedButton'); }); } }); }); 

 .selectedButton{ background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table3"> <tbody><tr> <td> <input id="checkall" type="checkbox"> </td> <td> Autor </td> <td> Komentarz </td> <td> Data dodania </td> <td> Post </td> <td> Status </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="1"> </td> <td> cipka<br>cipuszka@o2.pl </td> <td> sadasdsad </td> <td> 2017-06-03 </td> <td> Przykładowy Tytuł Strony </td> <td> <button id="1" class="yellow-button btn">Odpublicznij</button><button id="1" class="red-button btn">Usuń</button> </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="5"> </td> <td> Cipenia<br>Cifuszka@o2.pl </td> <td> aoskdopaskdop </td> <td> 2017-06-04 </td> <td> Przykładowy Tytuł Strony </td> <td> <button id="5" class="yellow-button btn">Odpublicznij</button><button id="5" class="red-button btn">Usuń</button> </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="11"> </td> <td> 54345345<br> </td> <td> </td> <td> 0000-00-00 </td> <td> Burde lubie kielbaske se zjesc! </td> <td> <button id="11" class="yellow-button btn">Odpublicznij</button><button id="11" class="red-button btn">Usuń</button> </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="25"> </td> <td> 234324234<br> </td> <td> </td> <td> 0000-00-00 </td> <td> Burde lubie kielbaske se zjesc! </td> <td> <button id="25" class="yellow-button btn">Odpublicznij</button><button id="25" class="red-button btn">Usuń</button> </td> </tr> </tbody></table> 

Use this code if you want that master checkbox on the table header to work

 $(document).ready(function(){ $('#checkall').click(function(){ var isChecked = $(this).prop('checked'); var allTr = $('tbody').find('tr').not(':first'); $(allTr).each(function(){ var cbInsideTr = $(this).find('input[type="checkbox"]'); $(cbInsideTr).prop('checked',!isChecked); $(cbInsideTr).trigger( "click" ); }); }); $("input[type=checkbox]").click(function(){ var trButtons = $(this).closest('tr').find('button'); if($(this).prop('checked')){ $(trButtons).each(function(){ $(this).addClass('selectedButton'); }); }else{ $(trButtons).each(function(){ $(this).removeClass('selectedButton'); }); } }); }); 

 .selectedButton{ background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table3"> <tbody><tr> <td> <input id="checkall" type="checkbox"> </td> <td> Autor </td> <td> Komentarz </td> <td> Data dodania </td> <td> Post </td> <td> Status </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="1"> </td> <td> cipka<br>cipuszka@o2.pl </td> <td> sadasdsad </td> <td> 2017-06-03 </td> <td> Przykładowy Tytuł Strony </td> <td> <button id="1" class="yellow-button btn">Odpublicznij</button><button id="1" class="red-button btn">Usuń</button> </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="5"> </td> <td> Cipenia<br>Cifuszka@o2.pl </td> <td> aoskdopaskdop </td> <td> 2017-06-04 </td> <td> Przykładowy Tytuł Strony </td> <td> <button id="5" class="yellow-button btn">Odpublicznij</button><button id="5" class="red-button btn">Usuń</button> </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="11"> </td> <td> 54345345<br> </td> <td> </td> <td> 0000-00-00 </td> <td> Burde lubie kielbaske se zjesc! </td> <td> <button id="11" class="yellow-button btn">Odpublicznij</button><button id="11" class="red-button btn">Usuń</button> </td> </tr> <tr> <td> <input type="checkbox" name="comment[]" value="25"> </td> <td> 234324234<br> </td> <td> </td> <td> 0000-00-00 </td> <td> Burde lubie kielbaske se zjesc! </td> <td> <button id="25" class="yellow-button btn">Odpublicznij</button><button id="25" class="red-button btn">Usuń</button> </td> </tr> </tbody></table> 

Answer 3

you can get clicked row's button like this

$("input:checkbox").click(function(){
    console.log($(this).closest("tr").find(".btn").attr("id"));
});

Answer 4

simply write like this

$("input[type=checkbox]:checked").closest('tr').find('button').attr('class', 'new_class');