Show div based on selected checkboxes
<p>I have a webpage having four Checkboxes as follows:</p>

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

<p>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 <strong>Compare</strong>.</p>

<p>Below is my code:</p>

<p>However, It should be displayed under the last checked checkbox, if only two or more checkboxarees checked and that is the <strong><em>compare</em></strong> link.</p>

<p>You can also get a clear understanding if you check my code:</p>

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