如果選中，如何通過復選框進入同一行中其他td中的按鈕attr？

Question

表看起來像這樣：

<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>

我有很多復選框。

我們有一些復選框。 如何獲取與選中復選框位於同一行的按鈕屬性，並更改此按鈕的類？

我有這個來獲取所有選中的復選框$("input[type=checkbox]:checked")

但是，現在如何更改已選中復選框的這些行中所有按鈕的類？

我試過$("input[type=checkbox]:checked").closest('button').attr('class', 'new_class'); 但這不起作用。

$("input[type=checkbox]:checked").parent().closest('button').attr('class', 'new_class'); 也行不通。

Answer 1

closest穿越了 DOM樹，直到達到給定的選擇。 find將遍歷

因此，您應使用closest來獲取表行，然后使用find方法返回祖先鏈並獲取按鈕。

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

我玩過一個游戲，並為您制作了一個Codepen： https ://codepen.io/jamespoel/pen/awGdqK

Answer 2

這是一個簡單的邏輯。 這是您需要做的。 選中復選框時添加一個類，而取消選中該類則將其刪除。 您可以通過檢測已單擊的復選框的最接近的<tr>來實現此目的，然后在獲得該<tr>只需找到<button>標記即可。 這將是一個元素數組，因為您在<tr>有兩個<button> <tr> 。 在這里，您需要使用JQuery each()函數並相應地添加或刪除類。 這是肯定會為您提供幫助的工作代碼。

 $(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> 

如果要使表標題上的主復選框起作用，請使用此代碼

 $(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

您可以像這樣單擊行的按鈕

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

Answer 4

只是這樣寫

$（“ input [type = checkbox]：checked”）。closest（'tr'）。find（'button'）。attr（'class'，'new_class'）;