Click here to Skip to main content
14,272,096 members
Rate this:
Please Sign up or sign in to vote.
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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[^]
   
v2

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100