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