Jquery filtering content (show / hide ) using radio buttons

Question

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.

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

based on which type it belongs
based on no of ........quantity

Here is the code which works for first filter (type):

<script>
    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 > 0) {
        $errorMessage.hide();
        $selectedFilters.each(function (i, el) {
            $categoryContent.filter(':contains(' + el.value + ')').show();
        });
    } else {
        $errorMessage.show();
    }

});
</script>

Here is the HTML for radio buttons.

<ul>
    <li><label for="cdg"><input type="radio" id="cdg" name="type" value="brand1"> brand1</label></li>
    <li><label for="cdh"><input type="radio" id="cdh" name="type" value="brand2"> brand1</label></li>
    <li><label for="cdi"><input type="radio" id="cdi" name="type" value="brand3"> brand1</label></li>
</ul>

<ul>
    <li><label for="cdj"><input type="radio" id="cdj" name="quantity" value="10">10</label></li>
    <li><label for="cdk"><input type="radio" id="cdk" name="quantity" value="20">20</label></li>
    <li><label for="cdl"><input type="radio" id="cdl" name="quantity" value="30">30</label></li>
</ul>

Here is the div and their content

<div id="#mainhide">
  <div>brand1 in stock - 10</div>
  <div>brand1 in stock - 20</div>
  <div>brand1 in stock - 30</div>
</div>
<div id="errorMessage">reset all fliters</div>

How can i make both filters work, can any one help me....

Thank you, Naresh Kamireddy

your code is weird.you have used checkbox with name fli as filter but there are no such checkbox elements in html code you have mentioned. — Milind Anantwar, May 29 '13 at 07:31
I have edited question can you check it now @ Milind Anantwar — user2361114, May 29 '13 at 08:58
:what are the activities you want to do based on two filters that you have mentioned — Milind Anantwar, May 29 '13 at 10:02

score 1 · Answer 1 · edited May 23 '17 at 11:50

You can not use special character in id, id should follow valid rules. you have used <div id="#mainhide">. this is invalid id name

use : <div id="mainhide">

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

More info :

What are valid values for the id attribute in HTML?

score 0 · Answer 2 · answered May 29 '13 at 09:31

0

I am not sure what exactly you want but you can have a look at this:

Also its <div id="mainhide"> not <div id="#mainhide">

http://jsfiddle.net/yyCSQ/3/

answered May 29 '13 at 09:31

Aamir Afridi

6,364
3
42
42

score 0 · Answer 3 · answered May 29 '13 at 09:45

You can refilter like you did with an attribute selector :

var $selectedFilters = $filters.filter(':checked').filter('[value="10"]';

I would also use $(document).ready(function(){[your code here]}); instead of wildly loading JS while the page is still loading. And I also suggest not using # in your IDs as suggested by others.

JQuery documentation

Jquery filtering content (show / hide ) using radio buttons

3 Answers3