Databases
StackOverflow2013
Postsdbo
POjquery checbox ( use as product comparison list )
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery checbox ( use as product comparison list )
    text
    copied!<p>Im new to Jquery and I am struggling with the following ; I have a list of products, which I would like to add to a comparison list. User selects product (checkbox) and values are stored in an array and display in div.</p> <p>I am having difficulty achieving the following :</p> <ul> <li>Limit <code>chckArray</code> to store only 2 values ( 2products ) or limit user from checking more than 2 checkboxes </li> <li>Div <code>container</code> is hidden by default, on checkbox click display ( if array is not null) when all checkboxes are unchecked hide(remove data append)</li> <li>Display in Div<code>&lt;li&gt;</code> Value ( Product ID ) of the two selected Items</li> </ul> <p>please any hints is appreciated. <strong>HTML</strong></p> <pre><code>// checkboxes from loop &lt;input type="checkbox" value="&lt;?php echo $res['id'];?&gt;" class="bottomRight" id="&lt;?php echo $res['id'];?&gt;" title="Compare" style="float:left;" /&gt; &lt;div id="container" style="display:none;"&gt; &lt;p&gt;You have added :&lt;/p&gt; &lt;ul&gt; &lt;li&gt;First Checkbox Value&lt;/li&gt; &lt;li&gt;Second Checkbox Value&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>JS</strong></p> <pre><code>$(document).ready(function () { // Get the checkboxes values based on the class $(".bottomRight").change(function() { getValueUsingClass(); }); }); function getValueUsingClass(){ // declare Array var chkArray = []; // look for all checkboes that have a class 'chk' $(".bottomRight:checked").each(function() { chkArray.push($(this).val()); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload