根据选定的复选框显示div [英] Show div based on selected checkboxes

问题描述

我有一个包含四个复选框的网页，如下所示:

I have a webpage having four Checkboxes as follows:

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

如果我选中两个或多个Checkbox，则在每个上一个选中的复选框之后，我需要一个div，该div最初应处于隐藏状态，以显示为比较的链接.

If I check two or more Checkbox then after every last checked check box I need a div which initially should be in hidden state to be displayed as a link that is Compare.

下面是我的代码:

但是，如果仅选中两个或多个复选框，并且应该是 比较 链接，则它应该显示在最后一个选中的复选框下.

However, It should be displayed under the last checked checkbox, if only two or more checkboxarees checked and that is the compare link.

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

You can also get a clear understanding if you check my code:

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

推荐答案

这可能就是您想要的:

$(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();
      });
    }
  });
});

总是从隐藏所有比较" <div>元素开始，然后在选中2个或更多元素时显示与选中的复选框相对应的元素.

That always starts by hiding all the "compare" <div> elements, then shows the ones corresponding to the checked checkboxes when 2 or more are checked.

这篇关于根据选定的复选框显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！