javascript - 如果选中复选框,如何获取同一行中其他 td 中的按钮 attr?

标签 javascript jquery html

表格如下所示:

<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'); 不起作用也是。

最佳答案

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

关于javascript - 如果选中复选框,如何获取同一行中其他 td 中的按钮 attr?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44885987/

相关文章:

javascript - 根据所选选项禁用单选按钮

javascript - 使用 html 和 javascript 添加两个数字

javascript - 代码在循环模式下不起作用

jquery - 数据表中的@Media打印类

html - 右边的遗留像素 - 不必要的滚动条

javascript - 更改按钮的文本和功能

javascript:从文档中获取父级的ID

javascript - 为什么套接字之间的数据传输需要很长时间?

javascript - 如何使用 Javascript 禁用输入字段?

python - 使用 Flask 和 Ajax 将数据从 html 传递到 mysql 数据库