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');

我有一个游戏，为你做了一个代码：https://codepen.io/jamespoel/pen/awGdqK

Answer 2

这是一个简单的逻辑。这是你需要做的。选中复选框后添加一个类，并在取消选中该类时删除该类。您可以通过检测已点击的复选框中最接近的<tr>来实现此目的，然后当您获得此<tr>时，只需找到<button>标记即可。这将是一个元素数组，因为<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>

如果您希望表标题上的master复选框起作用

，请使用此代码

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

简单地写这个

$（＆＃34;输入[类型=复选框]：检查＆＃34）接近的（＆＃39; TR＆＃39）找到（＆＃39;按钮＆＃39;）ATTR（＆＃。 39; class＆＃39;，＆＃39; new_class＆＃39;）;

如果选中，如何通过复选框获取同一行中其他td的按钮attr？

4 个答案: