根据选中的复选框显示div

我有一个网页有四个复选框，如下所示：

Buy Samsung 2230  
 
Compair
 
Buy Nokia N 95 
 
Compair
 p>Buy Motorola M 100 
 
Compair
 
Compair
 p>Buy LG 2000 
 
Compair 

如果我检查两个或更多Checkbox然后在每个最后检查复选框之后我需要一个div，它最初应该处于隐藏状态，以显示为比较链接。

以下是我的代码：

但是，如果仅选中了两个或更多复选框，那么它应显示在最后一个选中的复选框下，即比较链接。

如果您查看我的代码，您也可以清楚地了解：

 $(document).ready(function() { $('input[type=checkbox]').change(function() { if ($('input:checked').size() > 1) { $('#checkbox1_compare').show(); } else { $('#checkbox1_compare').hide(); } }) }); 

Answer 1

这可能是你想要的：

 $(function() { $('input:checkbox').change(function() { var $ck = $('input:checkbox:checked'); $('input:checkbox').each(function() { $('#' + this.id + '_compare').hide(); }); if ($ck.length > 1) { $ck.each(function() { $('#' + this.id + '_compare').show(); }); } }); }); 

这总是从隐藏所有“compare”

元素开始，然后在选中2个或更多时显示与选中复选框相对应的元素。

Answer 2

你应该尝试一个更通用的模型，例如让复选框包含某个类，然后使用jQuery.each()循环遍历它们，计算值，并在循环中相应地渲染它们的子div： jQuery(this).children('.hidden-div').show()

更多信息： jQuery.each（） ,. children（）