Mike Waynes Ответов: 1

Использование переключателя для фильтрации по значению списка

У меня есть три переключателя

<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>


И я хочу иметь возможность фильтровать этот список в соответствии со значением с помощью переключателей, то есть скрывать и показывать

Что я уже пробовал:

Я смог заставить фильтр работать с помощью таблицы

ZurdoDev

Какой у вас вопрос?

Mike Waynes

Привет, только что внес правку в этот вопрос.

ZurdoDev

Вы сказали нам, что вы хотите сделать (хотя это и не ясно), но вы не задали вопрос. Значит ли это, что вы просите кого-то сделать всю работу за вас?

1 Ответов

Рейтинг:
9

Karthik_Mahalingam

попробуй вот так

<!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>


Демонстрация : - JSFiddle[^]