將複選框添加到僅具有特定類的表格單元格

Question

我有一個標準的html表格，該表格使用分組插件進行了增強。當您點擊「分組」級別時，表格將展開以顯示該組內任意數量的表格行。我想要做的是在分組展開時將複選框添加到分組級別中的最後一個表格單元格。當我嘗試這樣做時，所有分組級別都會收到一個複選框，而不僅僅是我點擊的複選框。

HTML代碼（消毒和簡化的）

<!--Grouping Row 1 Expanded--> 
<tr id="group-id-example_XXX"> 
<td colspan="11" class="expanded-group" data-group-level="0"> 
<div class="checkboxinput"><input type="checkbox" class="check" name="" value=""></div> 
</td> 
</tr> 
<!--Grouping Row 1 Expanded--> 

<tr role="row" class="odd group-item" data-group="-b-XXX"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 

<tr role="row" class="odd group-item" data-group="-b-XXX"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 

<tr role="row" class="odd group-item" data-group="-b-XXX"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 

<!--Grouping Row 2 Collapsed--> 
<tr id="group-id-example_XXX"> 
<td colspan="11" class="collapsed-group" data-group-level="0"> 
<div class="checkboxinput"><input type="checkbox" class="check" name="" value=""></div> 
</td> 
</tr> 
<!--Grouping Row 2 Collapsed--> 

</tbody> 
</table> 

jQuery函數

$('tr[id^="group-id-example"]').on('click', function() { 
$(this).find('td').addClass('test'); 
    if ($('#example tr td').hasClass('test')) { 
     $('.checkboxinput').show(); 
    } else { 
     $('.checkboxinput').hide(); 
    } 
    }); 

Answer 1

問題是要顯示/隱藏所有複選框時使用$('.checkboxinput')。如果傳入的元素集合中的任何元素具有給定的類，則.hasClass()將返回true，因爲您正在將該類添加到上一行中的某些tds中，所以if條件將始終返回true。

var $checks = $('.checkboxinput'); 
$('tr[id^="group-id-example"]').on('click', function() { 
    var $cchecks = $(this).nextUntil('tr[id^="group-id-example"]').find('.checkboxinput').toggle(); 
    $checks.not($checks).hide(); 
}); 

Answer 2

感謝Arun讓我走上正軌。對我有用的是將.nextuntil（）更改爲.closest（）。不過，我不得不承認，我不完全明白爲什麼.nextUntil（）在這裏不起作用。

var $checks = $('.checkboxinput'); 
$('tr[id^="group-id-example"]').on('click', function() { 
var $cchecks = $(this).closest('tr[id^="group-id-example"]').find('.checkboxinput').toggle(); 
$checks.not($checks).hide(); 
});