Question

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

<p>Buy Samsung 2230<label>
<input type="checkbox" name="checkbox1" id="checkbox1" />
</label></p>
<div id="checkbox1_compare" style="display: none;"><a href="#">Compair</a></div>
<p>Buy Nokia N 95<label>
<input type="checkbox" name="checkbox2" id="checkbox2" /></label></p>
<div id="checkbox2_compare" style="display: none;"><a href="#">Compair</a></div>
p>Buy Motorola M 100<label>
<input type="checkbox" name="checkbox3" id="checkbox3" /></label></p>
<div id="checkbox3_compare" style="display: none;"><a href="#">Compair</a></div>
 <div id="checkbox2_compare" style="display: none;"><a href="#">Compair</a></div>
p>Buy LG 2000<label>
<input type="checkbox" name="checkbox4" id="checkbox4" /></label></p>
<div id="checkbox4_compare" style="display: none;"><a href="#">Compair</a></div>

如果我检查两个或更多复选框，则在每个最后一次选中复选框之后，我需要一个最初应处于隐藏状态的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”<div>元素，然后在选中2个或更多元素时显示与选中复选框相对应的元素。

Answer 2

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

更多信息：jQuery.each()，.children()

根据选中的复选框显示div

2 个答案: