Click here to Skip to main content
15,444,353 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have three radio buttons

<input type="radio" name="test"><label>All</label>
<input type="radio" name="test"><label> Under 10$</label>
<input type="radio" name="test"><label >Between 10$ - 20$</label>

<li value=6.67>costs 6.67$</li>

<li value=15>costs 15$</li>

<li value=19>costs 19$</li>


And I want to be able to filter this list according to the value using the radio buttons i.e hide and unhide

What I have tried:

I have been able to make the filter work using a table
Posted
Updated 12-Apr-17 2:36am
v3
Comments
ZurdoDev 12-Apr-17 8:05am    
What is your question?
Mike Waynes 12-Apr-17 8:25am    
Hi, Just made an edit to the question.
ZurdoDev 12-Apr-17 8:37am    
You have told us what you want to do (even though that is not clear) but you have not asked a question. Does that mean you are asking someone to do all the work for you?

1 solution

try like this

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>


    <script>

        $(function () {
            $('input[name="test"]').on('change', function (a, b) {
                var value = this.value;
                $('#ul1 >li').hide();
                if (value == 'All') {
                    $('#ul1 >li').show();
                }
                if (value == 'Under 10$') {
                    $('#ul1 >li').filter(function (a, b) {
                        var v = b.value;
                        return 10 > v;
                    }).show();
                }
                if (value == 'Between 10$ - 20$') {
                    $('#ul1 >li').filter(function (a, b) {
                        var v = b.value;
                        return v>=10 && v <= 20;
                    }).show();
                }
            });
        });


    </script>

    <input type="radio" value="All" checked name="test"><label>All</label>
    <input type="radio" value="Under 10$" name="test"><label> Under 10$</label>
    <input type="radio" value="Between 10$ - 20$" name="test"><label>Between 10$ - 20$</label>

    <ul id="ul1">
        <li value=6.67>costs 6.67$</li>
        <li value=15>costs 15$</li>
        <li value=19>costs 19$</li>
    </ul>

</body>
</html>


Demo : - JSFiddle[^]
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900