Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery filtering content (show / hide ) using radio buttons
    primarykey
    data
    text
    <p>Hey I am looking for a very simply jQuery code that displays a div when a certain radio button is selected, and hides that div if that radio button is "deselected" based on radio button value.</p> <p>I figured it out how to make it work with radio buttons for one filter, but I want to work it out for two filters say</p> <ol> <li>based on which <strong>type</strong> it belongs </li> <li>based on no of ........<strong>quantity</strong></li> </ol> <p><strong>Here is the code which works for first filter (type):</strong></p> <pre><code>&lt;script&gt; var $filters = $("input:radio[name='type']"); var $categoryContent = $('#mainhide .mainresultbox'); var $errorMessage = $('#errorMessage'); $filters.click(function() { // if any of the radio buttons for brand are checked, you want to show div's containing their value, and you want to hide all the rest. $categoryContent.hide(); var $selectedFilters = $filters.filter(':checked'); if ($selectedFilters.length &gt; 0) { $errorMessage.hide(); $selectedFilters.each(function (i, el) { $categoryContent.filter(':contains(' + el.value + ')').show(); }); } else { $errorMessage.show(); } }); &lt;/script&gt; </code></pre> <p><strong>Here is the HTML for radio buttons.</strong></p> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;label for="cdg"&gt;&lt;input type="radio" id="cdg" name="type" value="brand1"&gt; brand1&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="cdh"&gt;&lt;input type="radio" id="cdh" name="type" value="brand2"&gt; brand1&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="cdi"&gt;&lt;input type="radio" id="cdi" name="type" value="brand3"&gt; brand1&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;&lt;label for="cdj"&gt;&lt;input type="radio" id="cdj" name="quantity" value="10"&gt;10&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="cdk"&gt;&lt;input type="radio" id="cdk" name="quantity" value="20"&gt;20&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;label for="cdl"&gt;&lt;input type="radio" id="cdl" name="quantity" value="30"&gt;30&lt;/label&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>Here is the div and their content</strong></p> <pre><code>&lt;div id="#mainhide"&gt; &lt;div&gt;brand1 in stock - 10&lt;/div&gt; &lt;div&gt;brand1 in stock - 20&lt;/div&gt; &lt;div&gt;brand1 in stock - 30&lt;/div&gt; &lt;/div&gt; &lt;div id="errorMessage"&gt;reset all fliters&lt;/div&gt; </code></pre> <p>How can i make both filters work, can any one help me....</p> <p>Thank you, Naresh Kamireddy</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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